Pseudo-kelas nth-last-child
Pseudo-kelas nth-last-child memilih
elemen yang merupakan anak ke-n dari
induknya, dengan penghitungan dari akhir. Berperilaku
serupa dengan nth-child,
hanya saja penghitungannya dilakukan dari akhir.
Sintaks
selektor:nth-last-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 dibuat 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 akan menghasilkan 0 -
elemen seperti itu tidak ada (penomoran elemen dimulai dari 1),
jika n = 1, maka 2n akan menghasilkan 2 - elemen kedua, jika n = 2,
2n menghasilkan 4 - elemen keempat. Jika ditulis 3n - ini
akan menjadi setiap elemen ketiga (dimulai dari ketiga), dan seterusnya.
|
Contoh
Dalam contoh ini, kita akan membuat warna merah
pada li yang merupakan anak ke-4 dari akhir
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-last-child(4) {
color: red;
}
:
Contoh
Sekarang kita akan membuat semua
li genap dari akhir 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-last-child(even) {
color: red;
}
:
Contoh
Sekarang kita akan membuat semua li ganjil dari
akhir 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-last-child(odd) {
color: red;
}
:
Contoh
Sekarang kita akan membuat setiap li ketiga
dari akhir 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-last-child(3n) {
color: red;
}
:
