Pseudo-kelas nth-last-of-type
Pseudo-kelas nth-last-of-type memilih
elemen yang merupakan elemen ke-n dari tipe yang ditentukan
dalam induknya, dengan penghitungan dimulai dari akhir.
Berperilaku serupa dengan nth-of-type,
hanya saja penghitungannya dimulai dari akhir.
Sintaks
selector:nth-last-of-type(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? Gantikan n secara berurutan
dengan angka dari 0 dan seterusnya: jika n = 0, maka 2n menghasilkan 0 -
elemen seperti itu tidak ada (penomoran elemen dimulai 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 ketiga), dan seterusnya.
|
Contoh
Cari h2 yang merupakan 2-h2
dalam induk dari akhir:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Contoh
Cari semua h2 genap dari akhir:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Contoh
Cari semua h2 ganjil dari akhir:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
