Pseudo kelas nth-last-child

Pseudo kelas nth-last-child memilih elemen yang merupakan anak ke-n induk, dikira dari hujung. Berkelakuan serupa dengan nth-child, hanya kiraan dilakukan dari hujung.

Sintaks

csspemilih:nth-last-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 - elemen sedemikian tiada (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, kami akan menjadikan warna merah li tersebut, yang merupakan anak ke-4 dari hujung induk:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

cssli:nth-last-child(4) {
  color: red;
}

Результат:

Contoh

Sekarang, kami akan menjadikan merah semua li genap dari hujung:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

cssli:nth-last-child(even) {
  color: red;
}

Результат:

Contoh

Sekarang, kami akan menjadikan merah semua li ganjil dari hujung:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

cssli:nth-last-child(odd) {
  color: red;
}

Результат:

Contoh

Sekarang, kami akan menjadikan merah setiap li ketiga dari hujung:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

cssli:nth-last-child(3n) {
  color: red;
}

Результат: