CSS :nth-child() pseudo-class

Definisi dan penggunaan

CSS :nth-child(n)}} Pseudo-kelas digunakan untuk memilih elemen yang berada di posisi ke- n elemen

Pseudo-kelas ini cocokkan elemen berdasarkan indeksnya di dalam daftar anak elemen induknya.

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

Petunjuk:Lihat :nth-of-type() Pseudo-kelas digunakan untuk memilih elemen yang berada di dalam daftar anak elemen induknya,yang sama jenis (nama tag)dari n elemen.

Contoh

Contoh 1

Cara penggunaan :nth-child() Pseudo-kelas:

/* Pilih setiap empat elemen di dalam grup saudara */
:nth-child(4) {
  background-color: kuning;
}
/* Pilih elemen kedua di antara saudara div */
div:nth-child(2) {
  background-color: merah;
}
/* Pilih elemen li kedua di dalam daftar */
li:nth-child(2) {
  background-color: hijau terang;
}

Coba sendiri

Contoh 2

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

Di sini, kami menentukan warna latar belakang yang berbeda bagi semua elemen <p> yang indeksnya genap atau ganjil:

p:nth-child(ganjil) {
  background-color: merah;
}
p:nth-child(genap) {
  background: hijau terang;
}

Coba sendiri

Contoh 3

dengan rumus (an + b) Deskripsi:a menunjukkan langkah integer, n adalah semua bilangan bulat non-negatif yang mulai dari 0,b adalah penggeser integer.

Di sini, kami menentukan warna latar belakang bagi semua elemen <p> yang indeksnya adalah kelipatan 3 (akan memilih elemen ketiga, keenam, kesembilan, dll):

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

Coba sendiri

Contoh 4

Di sini, kami menentukan warna latar belakang bagi semua elemen <p> yang indeksnya adalah kelipatan 3. kemudian kami mengurangi 1 (akan memilih elemen pertama, keempat, ke tujuh, dll):

p:nth-child(3n-1) {
  background-color: merah;
}

Coba sendiri

Syarat CSS

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

Detil teknis

Dukungan browser

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