Memahami Konsep Pseudo Class Dan Pseudo Element Pada CSS

Zona Internetku No Comment May 30, 2019

Pseudo Selector

Setelah kalian membaca artikel sebelumnya yaitu tentang Mengenal Jenis Jenis Selector Pada Kode CSS, sebenarnya masih ada beberapa jenis selector lagi yaitu Pseudo Class. Pseudo Class bisa diibaratkan sebagai selector bayangan, karena selector ini terletak di bagian belakang setelah di antara selector dasar css lainnya.

1. Pengertian Pseudo Class
Pseudo Class bisa dikatakan sebagai selector pada kode CSS, namun selector jenis ini biasanya digunakan untuk memberikan style saat kondisi khusus pada selector yang telah ditentukan.
Biasanya seseorang yang menggunakan Pseudo Class mereka ingin merubah style pada link, tombol pada menu navigasi dan semacamnya.

Contoh Pseudo Class

:link berfungsi mengubah property pada element link
:visited berguna mengubah property pada element link yang sudah pernah dikunjungi/diklik
:hover fungsinya untuk mengubah property pada element saat kursor di arahkan ke element tersebut (mouseover)
:active gunanya untuk mengubah property pada element saat kamu sedang berada di element tersebut (clicked)

Cara Menggunakan Pseudo Class
Untuk menggunakan selector ini kalian harus mengetahui konsepnya dahulu, seperti dibawah ini

selector:pseudo-class {property:value}

Cara Penulisan Pseudo Class

:visited harus ditulis sesudah :link
:hover harus ditulis sesudah :visited dan :link
:active harus ditulis sesudah :visited, :link dan :hover

2. Pengertian Pseudo Element
Sedikit berbeda dengan Pseudo Class, jika Pseudo Class digunakan untuk memberikan style pada kondisi tertentu maka berbeda dengan dengan Pseudo Element. Pseudo Element memberikan style pada kondisi yang tetap dan sering digunakan untuk menciptakan sebuah objek baru pada element html supaya bisa memberikan tampilan yang lebih abstrak.

Contoh Pseudo Element

::first-line untuk memberikan style kepada baris pertama pada paragraf
::first-letter untuk memberikan style kepada huruf pertama pada paragraf
::before untuk membuat objek sebelum element yang ditandai
::after untuk membuat objek sesudah element yang ditandai

Cara Menggunakan Pseudo Element
Untuk menggunakan selector ini kalian harus mengetahui konsepnya dahulu, dan konsepnya adalah seperti dibawah ini

selector::pseudo-element {property:value}

Sebenarnya pada CSS versi sebelumnya yakni 1 dan 2 pseudo element menggunakan tanda ":" sebagai selector pseudo element, namun pada CSS versi 3 mengalami perubahan yaitu menggunakan tanda "::" supaya perbedaan antara pseudo-class dan pseudo-element lebih jelas, namun sebenarnya masih dapat menggunakan CSS versi 1 dan 2.

Baca juga :
Cara Menggunakan Selector Pada Kode CSS
Mengenal Macam Macam Selector Pada Kode CSS
Memahami Fungsi Selector, Property Dan Value Pada CSS

Contoh Penerapan Selector Pseudo-Class Dan Pseudo-Element

<html>
<head>
<title>Memahami Penggunaan Pseudo Selector CSS</title>

<style type="text/css">
* {font-size: 18px}
span {clear: both;
display: block;
margin: 5px auto;}
span a {background-color: #000e6b;
color: #fff;
padding: 3px 5px;
margin: 3px;
text-decoration: none;}

span a:hover {background-color:#ff0000;}

p.paragraf::first-letter {font-size: 36px;
color: #00ff00;
font-weight: bold;
float:left;}
</style>
</head>

<body>
<h1 class="title">Belajar CSS</h1>
<p>
Saya sedang belajar bahasa pemrograman Web CSS di Zona Internetku
<span><a href="zonainternetku.blogspot.com" target="_blank">Visit Now</a></span>
</p>
<p class="paragraf">
Pada dasarnya dalam pembuatan website membutuhkan berbagai macam bahasa pemrograman web untuk menghasilkan tampilan website yang dinamis, dan bahasa yang digunakan seperti bahasa pemrograman berikut : HTML, CSS, JavaScript, PHP dan lain lain.
Pada dasarnya dalam pembuatan website membutuhkan berbagai macam bahasa pemrograman web untuk menghasilkan tampilan website yang dinamis, dan bahasa yang digunakan seperti bahasa pemrograman berikut : HTML, CSS, JavaScript, PHP dan lain lain.
</p>
</body>
</html>