Pseudo-class: :hover, :focus, :nth-child

Style berdasarkan "keadaan"

Pseudo-class diawali satu titik dua (:) dan menargetkan elemen dalam keadaan tertentu, tanpa perlu menambah class di HTML.

:hover, :active, :focus

Tiga serangkai interaksi paling penting:

.tombol {
  background: #2563eb;
  transition: background 0.2s;
}

.tombol:hover {
  background: #1d4ed8; /* saat kursor di atasnya */
}

.tombol:active {
  transform: scale(0.97); /* saat sedang diklik */
}

.tombol:focus-visible {
  outline: 3px solid #93c5fd; /* saat fokus via keyboard */
}

Urutan penulisan yang aman buat link: LoVe HAte (:link, :visited, :hover, :active). Kalau :hover ditulis sebelum :link, bisa tertimpa.

:nth-child dan saudaranya

Menargetkan anak berdasarkan posisinya:

/* baris tabel belang-belang */
tr:nth-child(even) {
  background: #f8fafc;
}

/* item pertama dan terakhir */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }

/* setiap kelipatan 3 */
.galeri img:nth-child(3n) {
  border: 2px solid gold;
}

Pola nth-child: odd/even, angka (3 = anak ketiga), atau rumus an+b (2n+1 = 1, 3, 5, ...).

Ada juga :nth-of-type() yang hanya menghitung sesama jenis tag. Bedanya penting:

<div>
  <h2>Judul</h2>
  <p>Satu</p>
  <p>Dua</p>
</div>

p:nth-child(2) tidak kena apa-apa (anak kedua adalah h2, bukan p), tapi p:nth-of-type(2) kena paragraf "Dua".

Pseudo-class form

Validasi visual tanpa JavaScript:

input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }

Pasangan dengan atribut HTML required, type="email", minlength dan kamu dapat feedback form instan.

:not() buat pengecualian

/* semua tombol kecuali yang disabled */
button:not(:disabled):hover {
  cursor: pointer;
}

Catatan teknis: :hover di layar sentuh bermasalah: tap pertama kadang hanya memicu hover tanpa klik. Jangan sembunyikan informasi penting hanya di balik hover (misal menu yang cuma muncul saat hover). Pastikan semua bisa diakses lewat tap/klik juga. Untuk efek hover yang aman di mobile, bungkus dalam @media (hover: hover).

Rangkuman

Pseudo-class = keadaan elemen (:hover, :focus, :nth-child, :checked, :valid). Hafalkan LoVe HAte buat urutan link, bedakan nth-child vs nth-of-type, dan manfaatkan pseudo-class form buat validasi instan. Jangan andalkan hover semata di dunia layar sentuh.