Pseudo kelas nth-last-of-type
Pseudo kelas nth-last-of-type memilih
elemen yang merupakan elemen ke-n jenis tertentu
daripada induk, dikira dari hujung.
Berkelakuan serupa dengan nth-of-type,
hanya kiraan dilakukan dari hujung.
Sintaks
pemilih:nth-last-of-type(nombor | odd | even | ungkapan) {
}
Nilai
| Nilai | Keterangan |
|---|---|
| nombor |
Nombor positif bermula dari 1.
Menentukan nombor elemen yang ingin kita
akses. 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 satu)
hingga infiniti. Jadi, 2n bermaksud semua nombor genap
(bermula dari kedua).
Bagaimana memahaminya? Gantikan n secara berurutan
dengan nombor dari 0 dan seterusnya: jika n = 0, maka 2n memberikan 0 -
elemen sedemikian tidak wujud (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
Cari h2 yang merupakan 2-nd h2
dalam induk dari hujung:
<div>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Contoh
Cari semua h2 genap dari hujung:
<div>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Contoh
Cari semua h2 ganjil dari hujung:
<div>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
<h2>tajuk</h2>
<p>perenggan</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
