Pada artikel sebelumnya telah di jelaskan mengenai jenis-jenis selektor pada css, kali ini akan membahas mengenai perbedaan Pseudo class dan Pseudo element. Namun sebelum masuk ke pembahasan inti, saya akan membahas mengenai Pseudo Selector. Apa itu Pseudo Selector? Selektor yang digunakan untuk menyeleksi atau mengakses elemen HTML yang tidak dapat dijangkau dengan selektor biasa.
Pseudo Selector terdapat 2 jenis yaitu Pseudo Class dan Pseudo Element, berikut penjelasan dari kedua jenis selekter tersebut:
Apa itu Pseudo Class Selector?
Pseudo Class Selector merupakan selektor pada css yang diikuti oleh titik dua. Pseudo class selector sangat membantu dibeberapa kondisi, seperti ketika di hover sebuah elemen akan berganti warna dan lain sebagainya.
Jenis selektor ini didukung hampir semua jenis browser, beberapa pseudo class masih menggunakan sistem penulisan pada Css versi 2 ada juga yang sudah menggunakan sistem penulisan css versi 3, sebagai contoh menggunakan single colon dan doubel colon.
Contoh penggunaan Pseudo Class Selector
See the Pen Pseudo Class Selector by Pram Eko (@pram-eko) on CodePen.
Apa itu Pseudo Element Selector?
Pseudo Element Selector merupakan sebuah selektor yang bertindak seolah-olah Anda membuat sebuah elemen HTML baru kedalam sebuah markup. Pada Css3 pseudo element selector ditulis dengan awalan titik dua ganda (::)
Perlu diketahui bahwasannya terkadang pseudo element selector ditulis menggunakan awalan satu titik dua saja, namun beberapa browser akan menampilkan dengan penulisan titik dua ganda pada saat Anda view source.
Contoh penggunaan Pseudo Element Selector
See the Pen Pseudo Element Selector by Pram Eko (@pram-eko) on CodePen.
Menggabungkan Pseudo Class dengan Pseudo Element
Apakah pseudo class dengan pseudo element dapat digabungkan atau digunakan bersamaan? Tentu bisa, berikut contoh penggunaan pseudo class dan pseudo element digabungkan dalam satu kode:
.content p:first-child::first-line {
font-size: 28px;
font-weight: bold;
}
See the Pen Pseudo Class and Pseudo Element by Pram Eko (@pram-eko) on CodePen.
Ada banyak pseudo class yang dapat digunakan seperti :active, :blank, :checked dan lain sebagainya. Begitu pula dengan pseudo element seperti ::after, ::before, ::first-letter dan lain sebagainya.
