Pseudo-class nth-child

Pseudo-class nth-child memilih elemen, yang merupakan anak ke-n dari induknya.

Sintaksis

cssselector:nth-child(angka | odd | even | ekspresi) {
  
}

Nilai

Nilai	Keterangan
angka	Angka positif mulai dari `1`. Menentukan nomor elemen yang ingin kita tuju. Penomoran elemen dimulai dari `1`.
`odd`	Elemen ganjil.
`even`	Elemen genap.
ekspresi	Dapat membuat ekspresi khusus dengan huruf n, yang menunjukkan semua bilangan bulat dari nol (bukan dari satu) sampai tak terhingga. Jadi, `2n` berarti semua bilangan genap (dimulai dari kedua). Bagaimana memahaminya? Substitusikan ke dalam `n` secara berurutan angka dari `0` dan seterusnya: jika n = 0, maka 2n menghasilkan 0 - elemen seperti itu tidak ada (penomoran elemen dari 1), jika n = 1, maka 2n menghasilkan 2 - elemen kedua, jika n = 2, 2n menghasilkan 4 - elemen keempat. Jika ditulis 3n - ini akan menjadi setiap elemen ketiga (dimulai dari elemen ketiga), dan seterusnya.

Contoh

Dalam contoh ini, kita akan membuat warna merah pada li yang merupakan anak ke-4 dari induknya:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Contoh

Sekarang kita akan membuat semua li genap berwarna merah:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Contoh

Sekarang kita akan membuat semua li ganjil berwarna merah:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Contoh

Sekarang kita akan membuat setiap li ketiga (dimulai dari yang ketiga) berwarna merah:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Contoh

Dalam selector, Anda dapat menentukan rentang elemen. Misalnya, Anda memiliki daftar dari 20 elemen dan perlu memilih elemen dari 7 sampai 14 inklusif. Ini dapat dilakukan seperti ini:

html<ol>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: