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

cssselector: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:

html<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>

cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

Contoh

Cari semua h2 genap dari akhir:

html<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>

cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

Contoh

Cari semua h2 ganjil dari akhir:

html<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>

cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат: