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>

Tutorial Belajar CSS - Contoh Cara Menggunakan Pseudo-class dan Pseudo-element CSSDalam 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.

40 Comments

  1. Saichu
    05 Nov 14
    • Andre
      06 Nov 14
  2. thomas
    05 Nov 14
    • Andre
      06 Nov 14
  3. Jaka
    21 Jan 15
  4. wulan
    20 May 15
    • Andre
      21 May 15
      • wulan
        25 May 15
  5. Martin MS
    06 Jun 15
    • Anonymous
      06 Jun 15
  6. August
    27 Jul 15
    • Andre
      28 Jul 15
      • August
        05 Aug 15
      • Andre
        05 Aug 15
        • August
          10 Aug 15
        • Andre
          11 Aug 15
  7. bagoes
    13 Aug 15
    • bagoes
      13 Aug 15
    • Andre
      14 Aug 15
  8. marco
    18 Aug 15
    • Andre
      18 Aug 15
  9. August
    20 Aug 15
    • Andre
      21 Aug 15
  10. yoyon
    28 Nov 15
    • Andre
      29 Nov 15
  11. Ahmad Fauzi
    04 May 16
    • Andre
      06 Jun 16
  12. uziha
    05 Jun 16
    • uziha
      05 Jun 16
      • Andre
        06 Jun 16
  13. uziha
    07 Jun 16
    • Andre
      07 Jun 16
  14. Reza Kuntokz
    20 Jun 16
  15. Mahasiswa abadi
    20 Jul 16
  16. Agifa Gumelar
    23 Jul 16
  17. ervansah
    02 Dec 16
    • Andre
      03 Dec 16
  18. Alvin
    06 Apr 18
    • Andre
      08 Apr 18

Add Comment

Leave a Reply to Mahasiswa abadi Cancel reply