Pseudo-classes

Pseudo-class menunjuk elemen bukan berdasarkan nama, class, atau atribut yang tertulis di HTML, melainkan berdasarkan keadaan yang diketahui browser: elemen yang sedang disorot kursor, kotak centang yang terpilih, atau item pertama sebuah daftar. Sintaksnya diawali titik dua, misalnya :hover atau :first-child, dan dapat dirangkai dengan selector lain. Dengan pseudo-class, kita menuliskan state penting tanpa menambah dan mengganti class lewat JavaScript. Chapter ini memetakan kelompok-kelompoknya, membahas formula :nth-child(), lalu menunjukkan state mana yang stabil untuk diuji pada demo.

Tiga Kelompok Pseudo-class #

Daftar lengkapnya terdokumentasi pada Pseudo-classes di MDN . Kelompok interaksi akan kita pakai bersama transisi pada bagian interaksi; fokus bab ini ada pada kelompok struktural dan kondisi UI yang hasilnya dapat diverifikasi secara statis.

:nth-child() dan Formula an+b #

:nth-child(an + b) menunjuk anak berdasarkan posisi berurutan. Nilai n berjalan 0, 1, 2, dan seterusnya; browser menyusun daftar posisi hasil formula lalu menunjuk elemen pada posisi tersebut. Tabel berikut merangkum formula yang sering dipakai pada daftar berisi enam item, dengan rujukan lengkap pada :nth-child di MDN :

Contoh berikut menyorot kelipatan tiga pada sebuah daftar sekaligus mewarnai item pertamanya:

.daftar li:nth-child(3n) {
  color: rgb(2, 132, 199);
  font-weight: 700;
}

.daftar li:first-child {
  color: rgb(22, 163, 74);
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1 (.daftar li:nth-child(3n)): formula 3n menghasilkan posisi 3, 6, 9, dan seterusnya — pada daftar enam item, item tiga dan enam terpilih.
2. Baris 2–3: item terpilih diberi warna biru dan ketebalan teks 700 agar terlihat sebagai sorotan.
3. Baris 5 (.daftar li:first-child): pseudo-class struktural tanpa argumen menunjuk anak pertama; pada daftar ini item satu.
4. Kedua aturan aman saling menabrak karena posisi 1 tidak pernah menjadi hasil 3n.

:first-child vs :first-of-type #

Kedua pseudo-class ini mudah tertukar. :first-child menuntut elemen menjadi anak pertama dari induknya — apa pun jenisnya. :first-of-type menuntut elemen menjadi yang pertama di antara saudara sejenisnya. Perbedaannya terlihat pada kotak yang diawali judul:

.catatan-box p:first-of-type {
  font-style: italic;
}

<div class="catatan-box">
  <h3>Catatan</h3>
  <p>Paragraf pertama dari jenisnya.</p>
  <p>Paragraf kedua.</p>
</div>

Pada struktur tersebut, p:first-child tidak menunjuk apa pun karena anak pertama adalah h3. Sebaliknya p:first-of-type menunjuk paragraf pertama sehingga tampil miring (font-style: italic).

State yang Stabil untuk Diuji #

Pseudo-class interaksi seperti :hover bergantung pada posisi kursor, sehingga hasilnya tidak bisa diambil sebagai nilai statis pada demo. Sebagai gantinya, demo memakai state yang ditentukan atribut HTML: :checked pada kotak centang ber-atribut checked dan :disabled pada tombol ber-atribut disabled:

button:disabled {
  color: rgb(148, 163, 184);
  background-color: rgb(241, 245, 249);
}

.tombol-aktif {
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
}

.opsi input:checked + span {
  color: rgb(2, 132, 199);
  font-weight: 700;
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1 (button:disabled): tombol nonaktif diberi warna pudar agar pengguna memahami bahwa tombol itu tidak dapat ditekan.
2. Baris 6–9 (.tombol-aktif): class pembanding untuk tombol aktif, sehingga kontras kedua state terlihat berdampingan.
3. Baris 10 (.opsi input:checked + span): combinator + dari Chapter sebelumnya dirangkai dengan :checked — label di sebelah kanan kotak centang yang terpilih ikut berwarna dan tebal.

Untuk :hover, polanya sama tetapi efeknya hanya terlihat saat kursor berada di atas elemen:

.tautan:hover {
  text-decoration: underline;
}

Hasil di Browser:

Pada daftar enam item: item satu hijau (color: rgb(22, 163, 74));
item tiga dan enam biru dan tebal (color: rgb(2, 132, 199),
font-weight: 700).
Paragraf pertama di kotak catatan tampil miring (font-style: italic).
Tombol aktif biru dengan teks putih (background-color: rgb(2, 132, 199),
color: rgb(255, 255, 255)); tombol nonaktif pudar
(background-color: rgb(241, 245, 249), color: rgb(148, 163, 184)).
Label setelah kotak centang terpilih tampil biru dan tebal
(color: rgb(2, 132, 199), font-weight: 700); label kotak belum terpilih
tetap gelap (color: rgb(15, 23, 42)).

Demo pada chapter ini membawa delapan elemen uji dengan atribut data-expected yang memverifikasi seluruh nilai di atas lewat headless browser.