Pseudo-class nth-child
Pseudo-class nth-child memilih elemen,
yang merupakan anak ke-n dari induknya.
Sintaksis
selector:nth-child(angka | odd | even | ekspresi) {
}
Nilai
| Nilai | Keterangan |
|---|---|
| angka |
Angka positif mulai dari 1.
Menentukan nomor elemen yang ingin kita
tuju. Penomoran elemen dimulai dari 1.
|
odd |
Elemen ganjil. |
even |
Elemen genap. |
| ekspresi |
Dapat membuat ekspresi khusus dengan huruf n,
yang menunjukkan semua bilangan bulat dari nol (bukan dari satu)
sampai tak terhingga. Jadi, 2n berarti semua bilangan genap
(dimulai dari kedua).
Bagaimana memahaminya? Substitusikan ke dalam n secara berurutan
angka dari 0 dan seterusnya: jika n = 0, maka 2n menghasilkan 0 -
elemen seperti itu tidak ada (penomoran elemen dari 1),
jika n = 1, maka 2n menghasilkan 2 - elemen kedua, jika n = 2,
2n menghasilkan 4 - elemen keempat. Jika ditulis 3n - ini
akan menjadi setiap elemen ketiga (dimulai dari elemen ketiga), dan seterusnya.
|
Contoh
Dalam contoh ini, kita akan membuat warna merah
pada li yang merupakan anak ke-4
dari induknya:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Contoh
Sekarang kita akan membuat semua li genap berwarna merah:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Contoh
Sekarang kita akan membuat semua li ganjil berwarna merah:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Contoh
Sekarang kita akan membuat setiap li ketiga
(dimulai dari yang ketiga) berwarna merah:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Contoh
Dalam selector, Anda dapat menentukan rentang elemen.
Misalnya, Anda memiliki daftar dari 20
elemen dan perlu memilih elemen dari 7
sampai 14 inklusif. Ini dapat dilakukan
seperti ini:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
