Bayangin lampu teras yang cuma nyala waktu ada orang lewat. Lampunya sama, yang beda keadaannya. Pseudo-class adalah tambahan di selector yang bilang "pakai gaya ini cuma dalam keadaan tertentu": waktu mouse ada di atas elemen, waktu kolom isian lagi diklik, atau waktu elemen itu anak pertama di daftarnya. Ditulis pakai satu titik dua, nempel di belakang selector: a:hover.
🧪 Tebakan cepat:
a { color: blue; }lalua:hover { color: red; }. Link-nya merah terus atau cuma kadang-kadang? Tebak dulu, jawabannya ada di bagian "Ganti warna waktu mouse di atasnya".
Ganti warna waktu mouse di atasnya
<a href="#">Hover aku!</a>
<style>
a { color: blue; }
a:hover { color: red; }
</style>
a { color: blue; }adalah warna normal link-nya.a:hoveradalah selectoraditambah pseudo-class:hover, tanpa spasi. Artinya "link, tapi cuma selama mouse ada di atasnya".{ color: red; }cuma berlaku selama keadaan itu.
Hasilnya, link-nya biru. Arahkan mouse ke atasnya, dia jadi merah. Geser mouse-nya pergi, dia biru lagi. Itu jawaban tebakannya: cuma kadang-kadang. Perhatikan juga, a:hover ditulis sebagai aturan baru di bawah aturan a, bukan mengganti aturan a.
Keadaan lain yang sering dipakai: :focus (kolom isian yang lagi diklik atau diisi) dan :active (elemen yang lagi ditekan).
Pilih berdasarkan urutan
Pseudo-class juga bisa memilih elemen dari urutannya di dalam induknya (elemen yang membungkusnya):
li:first-child { color: red; }
li:last-child { color: gray; }
li:nth-child(3) { font-weight: bold; }
li:first-childmemilih<li>yang jadi anak pertama di daftarnya.li:last-childmemilih<li>yang jadi anak terakhir.li:nth-child(3)memilih anak ke-3. Angkanya ditulis di dalam kurung.li:nth-child(2n)memilih anak ke-2, 4, 6, dan seterusnya.
Aturan li { ... } yang biasa tetap berlaku buat item lain. Jadi li:first-child { color: red; } cuma bikin item pertama merah, sisanya tetap pakai warna dari li.
Nama pseudo-class harus persis. :first, :nth(1), :click, dan :over gak bisa dipakai buat memilih elemen, jadi browser mengabaikan aturannya.
⚠️ Jebakan yang sering ketemu
- Mengganti aturan lama. Mengubah
a { color: blue; }jadi merah bikin link-nya merah terus. Tambah aturana:hoveryang baru. - Spasi sebelum titik dua.
a :hoverartinya lain: elemen apa pun di dalam<a>yang lagi di-hover. Tulis nempel:a:hover. - Hover di HP. Layar sentuh gak punya mouse, jadi jangan taruh info penting yang cuma muncul di
:hover.
TL;DR: Pseudo-class menambahkan syarat ke selector, ditulis pakai satu titik dua tanpa spasi. :hover berlaku waktu mouse di atas elemen, :focus waktu kolom isian diklik, :active waktu ditekan. :first-child, :last-child, dan :nth-child(n) memilih berdasarkan urutan di dalam induknya. Tulis sebagai aturan baru, jangan mengganti aturan yang lama.
