Pseudo-kelas :nth-last-of-type() CSS

Definisi dan penggunaan

CSS :nth-last-of-type(n) pseudo-kelas digunakan untuk memilih elemen yang adalah elemen terakhir spesifik tipe dalam elemen induknya n setiap elemen.

n dapat berupa angka/indeks, kata kunci (ganjil atau genap) atau rumus (seperti an + b).

Petunjuk:Lihat :nth-last-child() pseudo-kelas digunakan untuk memilih elemen yang adalah elemen terakhir ke- n elemen anak, tidak peduli tipe nya.

Contoh

Contoh 1

Tentukan warna latar untuk setiap elemen <p> yang adalah elemen ke-2 terakhir dari elemen induknya.

Sama seperti itu, tentukan warna latar untuk setiap elemen <li> yang adalah elemen ke-3 terakhir dari elemen induknya:

p:nth-last-of-type(2) {
  background: merah;
}
li:nth-last-of-type(3) {
background: kuning;
}

Coba sendiri

Contoh 2

ganjil dan genap adalah kata kunci yang dapat digunakan untuk cocokkan elemen anak dengan indeks genap atau ganjil (indeks elemen pertama adalah 1).

Di sini, kami menentukan warna latar yang berbeda untuk elemen <p> dengan indeks genap dan ganjil:

p:nth-last-of-type(ganjil) {
  background: merah;
}
p:nth-last-of-type(genap) {
  background: biru;
}

Coba sendiri

Contoh 3

Dengan rumus (an + b). Keterangan: a adalah langkah integer, n adalah semua bilangan bulat non-negatif yang mulai dari 0, b adalah offset bilangan bulat.

Di sini, kami menentukan warna latar untuk semua elemen <p> dan <li> dengan indeks terakhir kelipatan 3:

p:nth-last-of-type(3n) {
  background: merah;
}
li:nth-last-of-type(3n) {
  background: kuning;
}

Coba sendiri

Syntaks CSS

:nth-last-of-type(index | ganjil | genap | an+b) {
  deklarasi css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-kelas ini.