Contoh
Menentukan warna latar belakang untuk setiap <p> unsur yang merupakan anak kedua dari induknya:
p:nth-child(2)
{
background: #ff0000;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
The :nth-child( n ) pemilih cocok dengan setiap elemen yang adalah n th anak, terlepas dari jenis, dari induknya.
n dapat berupa angka, kata kunci, atau rumus.
Tip: Lihatlah : n-of-tipe () pemilih untuk memilih elemen yang adalah n th anak, of a particular type , dari induknya.
| Versi: | CSS3 |
|---|
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh pemilih.
| Pemilih | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Syntax
Contoh lebih
Contoh
Kata kunci aneh dan bahkan yang yang dapat digunakan untuk mencocokkan elemen anak yang indeks aneh atau bahkan (the index of the first child is 1) .
Di sini, kita tentukan dua warna latar belakang yang berbeda untuk elemen aneh dan bahkan p:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Cobalah sendiri " Contoh
Menggunakan rumus ( an + b ) . Keterangan: a merupakan ukuran siklus, n adalah counter (starts at 0) , dan b adalah nilai offset.
Di sini, kita menentukan warna latar belakang untuk semua elemen p yang indeks merupakan kelipatan dari 3:
p:nth-child(3n+0)
{
background: #ff0000;
}
Cobalah sendiri "