CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} Pseudo-class digunakan untuk memilih elemen yang bertindak sebagai elemen ke n elemen yang mana pun

Pseudo-class ini menyesuaikan elemen berdasarkan indeksnya dalam daftar anak dalam elemen induk.

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

Petunjuk:Lihat :nth-of-type() Pseudo-class digunakan untuk memilih elemen yang bertindak sebagai anak elemen dalam daftar anak dalam elemen induk,yang sama jenis (nama tag)dari n elemen yang merupakan anak elemen lainnya.

Contoh

Contoh 1

Bagaimana untuk digunakan :nth-child() Pseudo-class:

/* Pilih setiap keempat 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 dalam daftar */
li:nth-child(2) {
  background-color: hijau cerah;
}

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 ganjil atau genap:

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

Coba sendiri

Contoh 3

gunakan formula (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 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 pertama, keempat, ke tujuh, dll):

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

Coba sendiri

CSS Grammar

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

Detil teknis

Dukungan browser

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