CSS :nth-last-child() Pemilih
Contoh
Tentukan warna latar belakang untuk setiap elemen <p> yang merupakan anak kedua dari induknya, dihitung dari anak terakhir:
p:nth-last-child(2)
{
background: red;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Selektor cocok dengan setiap elemen yang merupakan anak ke- n , terlepas dari jenisnya, induknya, dihitung dari anak terakhir.:nth-last-child(n)
n dapat berupa angka, kata kunci, atau rumus.
Tip: Lihat pemilih :nth-last-of-type() untuk memilih elemen yang merupakan anak ke- n , dari tipe yang ditentukan , dari induknya, dihitung dari anak terakhir.
Versi: kapan: | CSS3 |
---|
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung pemilih.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Sintaks CSS
:nth-last-child(number) {
css declarations;
}
Lebih Banyak Contoh
Contoh
Ganjil dan Genap adalah kata kunci yang dapat digunakan untuk mencocokkan elemen turunan yang indeksnya ganjil atau genap.
Di sini, kami menentukan dua warna latar belakang yang berbeda untuk elemen p ganjil dan genap, dihitung dari anak terakhir:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
Contoh
Menggunakan rumus ( an + b ). Deskripsi: a mewakili ukuran siklus, n adalah penghitung (dimulai dari 0), dan b adalah nilai offset.
Di sini, kami menentukan warna latar belakang untuk semua elemen p yang indeksnya merupakan kelipatan 3, dihitung dari anak terakhir:
p:nth-last-child(3n+0)
{
background: red;
}