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

Posted on

Pada panduan belajar CSS kali ini kita akan membahas mengenai 2 jenis selector khusus di pada CSS, yakni Pseudo-class dan Pseudo-element. Kedua selector ini mirip pada pengertiannya, sehingga kita pun akan membahas mengenai perbedaan keduanya.


Pengertian Pseudo Selector pada CSS

Selain 5 selector basic yang telah kita pelajari pada Tutorial CSS: Mengenal Jenis-jenis Selector Dasar CSS, CSS masih mempunyai 2 selector lagi bagi menolong kita bagi ‘menyeleksi’ bagian kode HTML yang ingin dikerjakan ‘style’nya. Kedua selector ini ialah Pseudo-class selector dan Pseudo-element selector, secara umum saya menyebut kedua selector ini selaku pesudo selector.

Walaupun terkesan ‘rumit’, pseudo selector ini tak terlalu susah dimengerti. Disebut pseudo selector (selector ‘semu’) karena tak seperti selector lain, pseudo selector digunakan bagi mengakses kode HTML yang ‘tak terlihat’ atau adalah bagian dari sebuah tag yang tak dapat diakses dengan selector biasanya.

Saya akan membahas Pseudo-class terlebih dahulu.


Pengertian Pseudo-class Selector CSS

Pseudo Class Selector ialah selector CSS yang digunakan bagi mengakses bagian tertentu pada HTML yang tak ‘terlihat’ (tak tertulis di pada HTML) atau bagian dari HTML yang tak dapat diakses dengan selector sederhana lain.

Pada referensi dari W3C, Pseudo-class selector dideskripsikan selaku 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

Pemakaian pseudo class selector lebih banyak dirancang bagi mengakses ‘kondisi khusus’ pada HTML.

Selaku contoh, seperti yang kita ketahui bahwa tag <a> digunakan bagi membangun link di pada HTML. Bila kita ingin membangun link berwarna merah, berikut ialah kode CSS menggunakan tag selector:

Bagi mengakses sebuah link, kita akan mengarahkan mouse ke pada tulisan link tersebut. Di ketika cursor mouse berada di atas link, kita pun dapat mengubah warna link bagi ketika itu saja, yakni di ketika posisi cursor mouse berada di atas link (istilah programmingnya: mouseover). Bagi hal ini, CSS menyediakan pseudo-class selector:hover”.

Bagi membangun tag <a> yang akan berubah menjadi hijau ketika mouse berada diatasnya (mouseover), kita menulisnya selaku berikut:

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

Walaupun pada contoh diatas saya menyatukan penulisan :hover dengan tag <a>, kita tak mesti menggunakannya secara bersama-sama, seperti berikut ini

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

Agar tak terlalu panjang, penjelasan mengenai cara pemakaian masing-masing pseudo-class selector akan saya bahas di artikel lain secara terpisah.


Pengertian Pseudo-element Selector CSS

Bila pseudo-class selector lebih berfokus kepada kondisi khusus dari HTML, karenanya pseudo-element selector akan menyeleksi ‘potongan’ tag atau mengakses sebuah faktor yang sebelumnya tak ada.

Pada referensi dari W3C, Pseudo-element selector dideskripsikan selaku 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

Pada versi CSS1 dan CSS2, pseudo-element ditulis menggunakan 1 tanda titik dua seperti pseudo-class (:), namun pada CSS3, pseudo-element ditulis menggunakan 2 tanda titik dua (::). Perubahan ini dikerjakan bagi menekankan perbedaan antara pseudo-class dengan pseudo-element.

Walaupun pada spesifikasi CSS3 pseudo-element mesti ditulis menggunakan 2 buah tanda titik 2 (::), namun web browser modern masih mendukung penulisan menggunakan 1 tanda titik dua (:). Selaku contoh, p::first-line boleh pun ditulis menjadi p:first-line. Lebih jauh lagi, IE8 kebawah masih ‘tak paham’ tanda “::”, sehingga menggunakan tanda “:”bagi pseudo-element masih umum digunakan.

Selaku contoh, pseudo-element mempunyai selector ::first-letter yang dapat digunakan bagi menyeleksi huruf pertama-tama dari sebuah paragraf. Misalkan bagi membangun huruf pertama-tama di tag <p> berwarna merah, karenanya kode CSSnya ialah selaku berikut:

Beberapa contoh pseudo-class selector lainnya ialah: ::first-line, ::before, dan ::after. Kita akan membahasnya secara mendalam di panduan lainnya.


Contoh Pemakaian Pseudo-class dan Pseudo-element CSS

Selaku contoh panduan pemakaian pseudo-class dan pseudo-element pada CSS, berikut ialah kode HTML dan CSS dengan menggunakan :hover dan ::first-letter:

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

Pada panduan kali ini kita telah membahas selector lanjutan menggunakan pseudo-class dan pseudo-element. Pembahasan lebih mendalam mengenai pemakaian contoh masing-masing selector akan saya bahas pada panduan berikutnya.


eBook CSS Uncover Duniailkom

Bila kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/