nth-child () adalah pemilih kelas semu CSS yang memungkinkan Kalian memilih elemen berdasarkan indeks (urutan sumber) di dalam wadahnya.
Kalian bisa memberikan angka positif sebagai argumen ke: nth-child (), yang akan memilih satu elemen yang indeksnya di dalam induknya cocok dengan argumen: nth-child (). Sebagai contoh, li: nth-child (3) akan memilih item daftar dengan nilai indeks 3; yaitu, ia akan memilih item daftar ketiga.
Kalian juga dapat memasukkan salah satu dari dua kata kunci yang telah ditentukan: genap dan ganjil. li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks genap (2, 4, 6, 8, dll.), dan li: nth-child (datar) akan memilih semua item daftar dengan nomor indeks ganjil (1 , 3, 5, 7, dll.).
: nth-child () juga memungkinkan Anda memilih satu atau lebih elemen menggunakan rumus (atau persamaan) —an + b — yang diteruskan sebagai argumen. Sintaksnya adalah: nth-child (an + b), di mana Anda mengganti a dan b dengan nilai integer Anda sendiri sehingga, setelah n diganti dengan angka positif (0, 1, 2, 3, dll.), Hasilnya angka adalah indeks elemen yang ingin Anda pilih. Misalnya,: anak ke-3 (3n + 1) akan memilih anak ke-1 (3 * 0 +1 = 1), anak ke-4 (3 * 1 +1 = 4), anak ke-7 (3 * 2 +1 = 7) anak , dll. dan seterusnya.
Apa: n-anak (an + b) yang dilakukan adalah ia membagi anak-anak wadah menjadi elemen (kelompok terakhir mengambil sisanya), dan kemudian memilih elemen ke-b dari setiap kelompok. Jadi, li: nth-child (3n +1) akan membagi item daftar menjadi 3 grup, meletakkan item sisanya dalam grup keempat (jika jumlah item tidak dapat dibagi 3), dan kemudian akan cocok dengan item pertama di masing-masing kelompok.
Misalnya, gambar berikut ini menunjukkan hasil memilih li: nth-child (3n + 1) dalam daftar item. Ada 10 item dalam daftar, dan kami memiliki = 3, sehingga 10 item akan dibagi dengan 3. 10/3 = 3 + 1, sehingga akan ada satu item yang tersisa yang akan dikelompokkan ke dalam grup terakhir dari kelompoknya. sendiri. Kemudian, untuk masing-masing dari empat grup, item pertama akan dipilih. Pada gambar berikut, item yang cocok memiliki latar belakang khaki.
Contoh berikut memilih baris genap dalam tabel dan menerapkan warna latar belakang untuk membuat efek zebra.
|
1 2 3 |
tr:nth-child(even) { background-color: #eee; } |
Berikut ini adalah valid: deklarasi nth-child ():
|
1 2 3 4 5 6 7 8 9 |
li:nth-child(-n+1) {} p:nth-child(odd) {} tr:nth-child(2n) {} /* 2n is equivalent to "even" */ article:nth-child(2n+1) {} /* 2n+1 is equivalent to "odd" */ li:nth-child(4n+1) {} |