Tutorial Belajar CSS: Pengertian Pseudo-class dan Pseudo-element CSS

Dalam tutorial belajar CSS kali ini kita akan membahas tentang 2 jenis selector khusus di dalam CSS, yakni Pseudo-class dan Pseudo-element. Kedua selector ini mirip dalam pengertiannya, sehingga kita juga akan membahas tentang perbedaan keduanya.

Pengertian Pseudo Selector dalam CSS

Selain 5 selector dasar yang telah kita pelajari dalam Tutorial CSS: Mengenal Jenis-jenis Selector Dasar CSS, CSS masih memiliki 2 selector lagi untuk membantu kita untuk 'menyeleksi' bagian kode HTML yang ingin dibuat 'style'nya. Kedua selector ini adalah Pseudo-class selector dan Pseudo-element selector, secara umum saya menyebut kedua selector ini sebagai pesudo selector.

Walaupun terkesan 'rumit', pseudo selector ini tidak terlalu susah dipahami. Disebut pseudo selector (selector 'semu') karena tidak seperti selector lain, pseudo selector digunakan untuk mengakses kode HTML yang 'tidak terlihat' atau merupakan bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa.

Saya akan membahas Pseudo-class terlebih dahulu.

Pengertian Pseudo-class Selector CSS

Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak 'terlihat' (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain.

Dalam referensi dari W3C, Pseudo-class selector dijelaskan sebagai berikut:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. http://www.w3.org/TR/css3-selectors/#pseudo-classes

Penggunaan pseudo class selector lebih banyak dirancang untuk mengakses 'kondisi khusus' dalam HTML.

Sebagai contoh, seperti yang kita ketahui bahwa tag <a> digunakan untuk membuat link di dalam HTML. Jika kita ingin membuat link berwarna merah, berikut adalah kode CSS menggunakan tag selector:

a { color:red; }

Untuk mengakses sebuah link, kita akan mengarahkan mouse ke dalam tulisan link tersebut. Pada saat cursor mouse berada di atas link, kita juga bisa mengubah warna link untuk saat itu saja, yakni pada saat posisi cursor mouse berada di atas link (istilah programmingnya: mouseover). Untuk hal ini, CSS menyediakan pseudo-class selector ":hover".

Untuk membuat tag <a> yang akan berubah menjadi hijau ketika mouse berada diatasnya (mouseover), kita menulisnya sebagai berikut:

a:hover { color:green; }

Perhatikan bahwa penulisan pseudo-class selector diawali dengan satu tanda titik dua (":").

Walaupun dalam contoh diatas saya menyatukan penulisan :hover dengan tag <a>, kita tidak harus menggunakannya secara bersama-sama, seperti berikut ini

:hover { color:yellow; }

Selain membuat style utuk efek "mouseover" seperti diatas, pseudo-class selector masih memiliki beberapa selector lain, seperti :visited , :focus , :active, :nth-child(N), :last-child, only-child dan :not(S).

Agar tidak terlalu panjang, penjelasan mengenai cara penggunaan masing-masing pseudo-class selector akan saya bahas pada artikel lain secara terpisah.

Pengertian Pseudo-element Selector CSS

Jika pseudo-class selector lebih berfokus kepada kondisi khusus dari HTML, maka pseudo-element selector akan menyeleksi 'potongan' tag atau mengakses sebuah elemen yang sebelumnya tidak ada.

Dalam referensi dari W3C, Pseudo-element selector dijelaskan sebagai berikut:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source documen. http://www.w3.org/TR/css3-selectors/#pseudo-elements

Dalam versi CSS1 dan CSS2, pseudo-element ditulis menggunakan 1 tanda titik dua seperti pseudo-class (:), namun dalam CSS3, pseudo-element ditulis menggunakan 2 tanda titik dua (::). Perubahan ini dibuat untuk menekankan perbedaan antara pseudo-class dengan pseudo-element.

Walaupun dalam spesifikasi CSS3 pseudo-element harus ditulis menggunakan 2 buah tanda titik 2 (::), namun web browser modern masih mendukung penulisan menggunakan 1 tanda titik dua (:). Sebagai contoh, p::first-line boleh juga ditulis menjadi p:first-line. Lebih jauh lagi, IE8 kebawah masih 'tidak mengerti' tanda "::", sehingga menggunakan tanda ":"untuk pseudo-element masih umum digunakan.

Sebagai contoh, pseudo-element memiliki selector ::first-letter yang bisa 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; }

Beberapa contoh pseudo-class selector lainnya adalah: ::first-line, ::before, dan ::after. Kita akan membahasnya secara mendalam pada tutorial lainnya.

Contoh Penggunaan Pseudo-class dan Pseudo-element CSS

Sebagai contoh tutorial penggunaan pseudo-class dan pseudo-element dalam CSS, berikut adalah kode HTML dan CSS dengan menggunakan :hover dan ::first-letter:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Pseudo-class dan Pseudo-element CSS</title>
<style type="text/css">
   a:hover {
      color : green;
   }
               
   p::first-letter {
     font-size : 30px;
     color     : red;
     float     : left;
   }
</style>
</head>
<body>
   <h2>Belajar Pseudo-class dan Pseudo-element CSS</h2>

   <h3>contoh pseudo-class: :hover</h3>
   <a href="https://www.duniailkom.com">Belajar CSS di www.duniailkom.com</a>

   <h3>contoh pseudo-element: ::first-letter</h3>
   <p class="left">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>

</body>
</html>

Dalam contoh diatas, saya membuat sebuah link yang akan berubah warnanya menjadi hijau ketika cursor mouser berada di atas link tersebut (menggunakan :hover), dan sebuah paragraf dengan huruf pertama berwarna merah (menggunakan ::first-letter).

Dalam tutorial kali ini kita telah membahas selector lanjutan menggunakan pseudo-class dan pseudo-element. Pembahasan lebih mendalam tentang penggunaan contoh masing-masing selector akan saya bahas dalam tutorial berikutnya.

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.