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:
|
1 |
a { color:red; } |
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:
|
1 |
a:hover { color:green; } |
Perhatikan bahwa penulisan pseudo-class selector diawali dengan satu tanda titik dua (“:”).
|
1 |
:hover { color:yellow; } |
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).
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:
|
1 |
p::first-letter { color:red; } |
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:
|
1 2 |
<!DOCTYPE html><br/><html><br /><head><br/><title>Belajar Pseudo-class dan Pseudo-element CSS</title><br/><style type=text/css><br/> a:hover {<br/> color : green;<br/> }<br/> <br/> p::first-letter {<br/> font-size : 30px;<br/> color : red;<br/> float : left;<br/> }<br/></style><br/></head><br/><body><br/> <h2>Belajar Pseudo-class dan Pseudo-element CSS</h2><br/><br/> <h3>contoh pseudo-class: :hover</h3><br/> <a href=http://www.duniailkom.com>Belajar CSS di www.duniailkom.com</a><br/><br/> <h3>contoh pseudo-element: ::first-letter</h3><br/> <p class=left>Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Nulla erat dolor, ullamcorper in ultricies<br/> eget,fermentum rhoncus leo. Curabitur eu mi vitae metus<br/> posuere laoreet. Eam facilis omittantur at, usu efficiantur<br/> neglegentur delicatissimi et, in per vero splendide<br/> persequeris.<p><br/><br/></body><br/></html> |
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
Sumber https://www.duniailkom.com/
