Pseudo-class :nth-child()

:first-child dan :last-child hanya mengunci dua ujung daftar; kebutuhan nyata sering lebih bervariasi — baris genap untuk zebra striping, setiap item ketiga untuk grid, atau tiga peringkat teratas untuk papan skor. Semua pola itu ditangani satu pseudo-class dengan formula kecil: :nth-child(). Pada chapter ini kita membedah aritmetika an+b, memakainya untuk tabel dan daftar, lalu mengenal sintaks modern yang menghitung berdasarkan class.

Formula an + b #

Di dalam kurung :nth-child(), browser mengevaluasi formula an + b untuk n = 0, 1, 2, 3, ... dan mencocokkan anak pada posisi-posisi hasilnya. Nilai a mengatur langkah, nilai b mengatur titik awal:

Dua pola yang paling sering disalahpahami patut diuraikan. Pada -n + 3, langkahnya negatif: substitusi n = 0 menghasilkan 3, n = 1 menghasilkan 2, n = 2 menghasilkan 1, dan selebihnya menghasilkan nol atau negatif sehingga diabaikan. Pada n + 4, n = 0 menghasilkan 4 dan seterusnya naik tanpa batas, sehingga seleksinya berupa rentang terbuka.

Cara cepat membaca formula apa pun adalah substitusi manual. Ambil :nth-child(3n + 2): dengan n = 0 hasilnya 2, n = 1 hasilnya 5, n = 2 hasilnya 8 — pola ini menyasar posisi kedua, kelima, kedelapan, dan seterusnya. Membiasakan diri menghitung begini membuat formula yang ditulis orang lain mudah dibaca, dan mengurangi kesalahan saat menyusun formula sendiri.

Zebra Striping pada Tabel #

Penggunaan :nth-child() yang paling terkenal adalah memberi latar bergantian pada baris tabel agar mata mudah mengikuti satu baris dari kiri ke kanan:

.tabel-harga tbody tr:nth-child(even) {
  background-color: #f2f7f4;
}

Ingat, :nth-child() menghitung semua anak dari induk yang sama — pada tbody yang isinya hanya tr, perhitungannya berjalan persis seperti harapan. Pola yang sama bekerja pada ul: ul li:nth-child(even) memberi latar bergantian untuk daftar panjang seperti log kegiatan.

Sorot Tiga Teratas dengan -n + 3 #

Pola rentang negatif sangat berguna untuk papan peringkat:

.papan-skor li:nth-child(-n + 3) {
  background-color: #fdf3dd;
  font-weight: 700;
}

Bila suatu hari peringkat perlu dibatasi lima, cukup ganti angkanya menjadi -n + 5 tanpa menyentuh HTML.

Demo berikut menyatukan kedua pola — zebra striping pada tabel dan sorotan tiga teratas pada papan skor:

Menghitung dari Bawah dengan :nth-last-child #

Versi pencerminnya, :nth-last-child(), menghitung posisi dari anak terakhir ke depan. Formula yang sama berlaku, sehingga :nth-last-child(1) setara :last-child, dan :nth-last-child(-n + 2) menyasar dua item terakhir. Pola ini praktis ketika jumlah item berubah-ubah tetapi yang penting justru ujung bawahnya, misalnya dua baris total pada footer tabel. Kombinasi keduanya — misalnya :nth-child(n + 2):nth-last-child(n + 2) untuk menyasar item yang bukan ujung pertama maupun terakhir — adalah pola lanjutan yang layak dibaca ulang saat benar-benar dibutuhkan.

Pola Modern: Menghitung Berdasarkan Class #

Kendala lama :nth-child(): perhitungannya memperhitungkan semua saudara, termasuk elemen dengan jenis berbeda. CSS modern menambahkan sintaks of S yang menghitung hanya saudara yang cocok dengan selector tertentu:

.grid-produk :nth-child(2 of .kartu) {
  outline: 2px solid #1f6f54;
}

Tanpa of .kartu, posisi “kedua” dihitung terhadap seluruh anak dan sorotan bisa meleset.

Pada demo berikut, sorotan hijau jatuh pada kartu kedua di antara para kartu — banner pengantar di atasnya tidak ikut dihitung:

Ringkasan #

:nth-child(an + b) mengubah posisi menjadi aritmetika: keyword odd dan even untuk pola bergantian, 3n + 1 untuk kelipatan, -n + 3 untuk rentang teratas, dan :nth-last-child() untuk menghitung dari bawah. Sintaks of S melengkapi perhitungan berbasis class. Masih dalam keluarga pseudo-class struktural, chapter berikutnya membahas kebalikan dari semua selector ini: :not(), yang mencocokkan elemen yang justru tidak memenuhi pola tertentu.