Pseudo kelas nth-child
Pseudo kelas nth-child memilih elemen,
yang merupakan anak ke-n induk.
Sintaks
pemilih:nth-child(nombor | odd | even | ungkapan) {
}
Nilai
| Nilai | Keterangan |
|---|---|
| nombor |
Nombor positif bermula dari 1.
Menentukan nombor elemen yang ingin kita
sasarkan. Penomboran elemen bermula dari 1.
|
odd |
Elemen ganjil. |
even |
Elemen genap. |
| ungkapan |
Boleh menyusun ungkapan khas dengan huruf n,
yang mewakili semua integer dari sifar (bukan dari satu)
hingga infiniti. Jadi, 2n bermaksud semua nombor
genap (bermula dari kedua).
Bagaimana memahaminya? Gantikan n secara berurutan
nombor dari 0 dan seterusnya: jika n = 0, maka 2n memberikan 0 -
tiada elemen sedemikian (penomboran elemen dari 1),
jika n = 1, maka 2n memberikan 2 - elemen kedua, jika n = 2,
2n memberikan 4 - elemen keempat. Jika menulis 3n - ini
akan menjadi setiap elemen ketiga (bermula dari ketiga), dan seterusnya.
|
Contoh
Dalam contoh ini, kita akan menjadikan warna merah
li yang merupakan anak ke-4
induknya:
<ul>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Contoh
Sekarang, kita akan jadikan semua li genap berwarna merah:
<ul>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Contoh
Sekarang, kita akan jadikan semua li ganjil berwarna merah:
<ul>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Contoh
Sekarang, kita akan jadikan setiap li ketiga
(bermula dari ketiga) berwarna merah:
<ul>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Contoh
Dalam pemilih, anda boleh menentukan julat elemen.
Katakan, anda mempunyai senarai 20
elemen dan perlu memilih elemen dari 7
hingga 14 termasuk. Ini boleh dilakukan
seperti berikut:
<ol>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
<li>item senarai</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
