Dalam CSS, terdapat dua fitur yang sangat penting untuk memperkaya tampilan tanpa perlu menambahkan elemen HTML tambahan, yaitu pseudo-class dan pseudo-element.
Kedua fitur ini memungkinkan kita untuk menargetkan elemen tertentu berdasarkan kondisi atau untuk menyisipkan konten secara virtual.
Apa itu Pseudo-class?
Pseudo-class adalah "kelas semu" yang digunakan untuk memberikan style berdasarkan keadaan tertentu dari elemen. Contohnya saat mouse diarahkan ke sebuah tombol, kita bisa mengubah warnanya menggunakan pseudo-class.
Beberapa contoh pseudo-class umum antara lain:
:hover— saat elemen disentuh kursor-
:focus— saat elemen mendapat fokus (biasanya input) -
:nth-child(n)— memilih elemen berdasarkan urutan anak -
:checked— saat checkbox atau radio dalam keadaan aktif
Contoh penggunaan :hover
Apa itu Pseudo-element?
Pseudo-element adalah elemen semu yang digunakan untuk menambahkan
konten atau style pada bagian tertentu dari elemen, seperti awal atau
akhir. Pseudo-element ditulis menggunakan :: (dua titik
dua).
Beberapa pseudo-element yang populer adalah:
::before— menambahkan konten sebelum isi elemen::after— menambahkan konten setelah isi elemen-
::first-letter— menargetkan huruf pertama dari teks -
::first-line— menargetkan baris pertama dari paragraf
Contoh penggunaan ::before dan ::after
Kesimpulan
Pseudo-class dan pseudo-element sangat berguna dalam mempercantik tampilan dan meningkatkan interaktivitas tanpa perlu menambahkan elemen HTML tambahan. Mereka adalah bagian penting dari teknik styling modern.