Pseudo-kelas :nth-last-child() CSS

Definisi dan penggunaan

CSS :nth-last-child(n) Pseudo-kelas digunakan untuk mencocokkan setiap elemen yang menjadi ke-n anak terakhir elemen orang tua, tanpa menghiraukan tipe nya.

n boleh berupa angka/index, kata kunci (ganjil atau genap) atau formula (seperti an + b)

Petunjuk:Lihat :nth-last-of-type() Pseudo-kelas digunakan untuk memilih setiap elemen yang menjadi ke-n anak terakhir elemen orang tua, tidak peduli tentang tipe nya. n elemen dari elemen.

Contoh

Contoh 1

Menentukan warna latar belakang untuk setiap elemen <p> yang menjadi kedua terakhir dari elemen orang tua nya:

p:nth-last-child(2) {
  background-color: merah;
}

Coba sendiri

Contoh 2

ganjil dan genap adalah kata kunci yang dapat digunakan untuk mencocokkan elemen yang indeksnya ganjil atau genap.

Disini, kita menentukan warna latar belakang yang berbeda untuk semua elemen <p> yang indeks terbalik adalah genap dan ganjil:

p:nth-last-child(ganjil) {
  background-color: merah;
}
p:nth-last-child(genap) {
  background-color: biru;
}

Coba sendiri

Contoh 3

dengan formula (an + bDeskripsi:a menunjukkan langkah integer, n adalah semua bilangan bulat nonnegatif yang dimulai dari 0,b adalah offset integer.

Disini, kita menentukan warna latar belakang untuk semua elemen <p> yang indeks terbalik adalah kelipatan 3:

p:nth-last-child(3n+0) {
  background-color: merah;
}

Coba sendiri

语法 CSS

:nth-last-child(indeks | ganjil | genap | an+b) {
  deklarasi css;
}

Detil teknis

Dukungan browser

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