Apa perbedaan Pseudo-class dan Pseudo-element pada selector di CSS?
Jenis-jenis Selector selain dari 5 selector dasar yang sudah kita pelajari bersama dalam artikel tutorial Mengenal jenis-jenis selector yang sering digunakan pada CSS, pada CSS terdapat selector yang dapat membantu dalam menyeleksi kode HTML yang akan dibuat stylenya yaitu pseudo selector. Selector ini disebut pseudo selector (selector palsu dalam Bahasa indonesianya) karena tidak seperti selector lain dalam penggunaannya. pseudo selector digunakan untuk mengakses kode HTML atau bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa. Pada pseudo selector terdapat 2 macam yaitu Pseudo-class selector dan Pseudo-element selector.
Pseudo Class Selector merupakan selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak tertulis di dalamnya atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain. Untuk contoh sederhana misal tag “<a>” kita ketahui digunakan untuk membuat link di dalam HTML. Jika kita ingin menghendaki warna link bewarna hijau, untuk kode CSS menggunakan tag selector seperti dibawah ini.
a { color:green; }
sedangan untuk menginginkan warna berubah dari hijau menjadi orange saat posisi cursor mouse berada posisi di atas (mouse over) link maka kita menambahkan pseudo selector (:hover) pada CSS kita. Untuk membuat tag “<a>” yang akan berubah menjadi orange ketika maouse berada diatasnya, dapat dituliskan sebagai berikut,
a:hover { color:orange; }
Note: penulisan pseudo-class selector diawali dengan satu tanda titik dua (“:”).
Dalam penulisan pseudo class tidak harus bersama-sama dengan tag “<a>”, dapat dengan hanya menuliskan :hover atau dapat dituliskan sebagai berikut.
:hover { color:orange; }
Untuk tampilannya seperti apa? Anda bisa di coba dengan kode HTML berikut ini.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BAB 7</title>
<style>
ul.in{list-style-position:inside;}
/*:hover { color:orange; } */
a:hover { color:orange; }
a { color:green; }
</style>
</head>
<body style="background:#FFFFF1;">
<h2 style="font-style:italic;color#003366"> list style-tipe values: ul </h2>
<ul class="in">
<li><a href="#">list-style-position:inside</a></li>
<li><a href="#">Elemen, Tag dan Atribut</a></li>
<li><a href="#">Heading dan Paragraf</a></li>
<li><a href="#">Formating</a></li>
</ul> <hr>
</body>
</html>
Selain pseudo selector digunakan dalam membuat efek “mouseover”, pseudo-class selector juga dapat digunakan untuk beberapa selector lain, seperti :visited , :focus , :active, :nth-child(N), :last-child, only-child dan:not(S).
Selector yang kedua selain pseudo class selector, yaitu pseudo element selector. Perbedaannya pseudo class dengan pseudo element apa ya? Jika pseudo-class selector lebih berfokus kepada kondisi khusus dari HTML, sedangkan pseudo-element selector akan menyeleksi bagian/potongan tag atau mengakses sebuah elemen yang sebelumnya tidak ada.
Dalam penulisannya, pada CSS3 pseudo element ditulis menggunakan 2 tanda titik dua (::). Namun bisa juga dengan di tulis menggunakan 1 tanda titik dua (:) seperti penulisan pseudo class (ini berlaku pada jenis CSS1 dan CSS2). Sebagai contoh, pseudo-element memiliki selector ::first-letter yang dapat digunakan untuk menyeleksi huruf pertama dari sebuah paragraf. Misalkan untuk membuat huruf pertama pada tag <p> berwarna merah, maka kode CSSnya adalah sebagai berikut:
p::first-letter { color:red; }
Jika dalam penulisna HTML secara lengkap sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BAB 7</title>
<style>
p::first-letter { color:red; }
</style>
</head>
<body style="background:#FFFFF1;">
<p>
Selector yang kedua selain pseudo class selector, yaitu pseuso element selector.</p>
<p>Perbedaannya pseudo class dengan pseudo element apa ya? Jika pseudo-class selector lebih
</p>
</body>
</html>
Sekian tutorial tentang Pseudo class selector dan Pseudo element selector, untuk masing-masing contoh dapat dilihat pada artikel berikutnya.
