Tombol biasa diem-diem aja gak menarik. Tapi pas mouse mendekat berubah warna jadi lebih gelap (hover), pas dipencet beneran nyusut sedikit (active), pas form input lagi diisi border-nya nyala (focus) — feel-nya jadi alive. Itu semua pseudo-classes — selector ajaib yang nyamperin elemen berdasarkan KONDISI/STATE-nya, bukan berdasarkan tag atau class. Ditulis pake titik dua tunggal : — :hover, :focus, :active, dan banyak lagi.

💡 Pseudo-class buka pintu interaktivitas tanpa JavaScript. Banyak efek yang dulu butuh JS sekarang cukup CSS murni: dropdown menu yang muncul saat hover, tab yang aktif via :checked, form validation visual via :invalid. Bahkan bisa bikin toggle switch tanpa satu baris JS pun.

Pseudo-class yang sering digunakan:

• :hover — saat mouse di atas elemen
• :focus — saat elemen sedang fokus (diklik/tab)
• :active — saat elemen sedang ditekan
• :first-child — elemen pertama dalam parent
• :last-child — elemen terakhir dalam parent
• :nth-child(n) — elemen ke-n dalam parent
• :not(selector) — elemen yang TIDAK cocok dengan selector

/* Warna berubah saat hover */
a:hover {
  color: red;
}

/* Garis tepi saat input fokus */
input:focus {
  border-color: blue;
  outline: none;
}

/* Warnai baris ganjil tabel */
tr:nth-child(odd) {
  background: #f5f5f5;
}

/* Semua paragraf kecuali yang pertama */
p:not(:first-child) {
  margin-top: 16px;
}

🎭 Analogi sehari-hari

Pseudo-class = reaksi pelayan warung sesuai kondisi pelanggan. Pas pelanggan deketin meja (:hover) → pelayan langsung kasih menu. Pas pelanggan lagi pesen (:focus) → pelayan tegak siap nulis. Pas pelanggan mencet bel (:active) → pelayan langsung dateng. Pas tombol lagi gak bisa ditekan (:disabled) → pelayan kasih wajah maaf "stok habis". CSS otomatis reaksi sesuai state, gak butuh JavaScript ribet.

⚠️ Jebakan yang sering ditemui

• :hover di mobile aneh — mobile tidak punya hover. Setelah tap, hover state nyangkut sampai tap di tempat lain. Pakai media query (hover: hover) untuk hover-only di desktop.
• :focus ring sering di-disable developer (jelek-jelekan) = a11y disaster. Ganti dengan focus ring custom yang masih visible.
• Urutan LVHA: :link → :visited → :hover → :active. Salah urutan = state lain override hover.
• :nth-child berbasis position di parent, bukan tipe. p:nth-child(2) = kalau child kedua adalah <p>, match. Kalau bukan, no match. Pakai :nth-of-type untuk tipe.
• :not() lawas terbatas — modern browser support :not(.a, .b) (multi). Cek browser support.
• :checked + sibling selector = pure-CSS toggle (no JS).

TL;DR: Pseudo-class = selector berdasar KONDISI/STATE elemen, bukan tag/class. Ditulis pakai : tunggal — :hover, :focus, :active, :disabled, :nth-child(), :not(). Powerful buat interaksi visual tanpa JavaScript. Buat link, ikuti urutan LVHA (link → visited → hover → active) biar gak ke-override.

🎯 Urutan pseudo-class di link — LVHA rule. Salah urutan = state bawah ke-override yang di atas:

• :link (belum dikunjungi)
• :visited (udah pernah dikunjungi)
• :hover (mouse di atasnya)
• :active (lagi dipencet)

Mnemonic: LoVe HAte (LV-HA). Kalau :hover ditulis SEBELUM :visited, link visited gak bakal show hover style — karena :visited lebih spesifik (urutan tulis = pemenang kalau spesifisitas sama). Aturan klasik 1996 yang masih relevan.