CSS nth-child Selector

nth-child digunakan untuk menyeleksi element berdasarkan urutan anak (child). Dalam sebuah element, terdapat tag pembuka (opening tag) dan tag penutup (closing tag), contoh: opening tag: <div> dan closing tag-nya adalah: </div> yang ditandai dengan /. Jadi, setiap element yang berada didalam element lain (didalam tag pembuka dan tag penutup), bisa dikatakan child atau anak element dari element yang menaunginya. Tapi, tidak semua element memiliki closing tag. nth-child ditulis dengan kode seperti: :nth-child(X) : X = bisa ditulis dengan nomor, keyword ataupun formula.


Syntax
Penggunaan Sintaksis CSS nth-child

:nth-child(X) {
Property: Value;        /* Deklarasi CSS */
}

/*
Ket:
nth-child(X) = X bisa di tulis dengan:
1. number : nomor (1,2,3,4,5 etc.)
2. keyword: odd, even
3. formula: (3n), (n+4), (-n+4), (2n+3), (-2n+9)  etc.
*/

Example
Contoh CSS nth-child

div p:nht-child(2) : Menyeleksi p yang mana anak kedua dari div.

HTML
<div>
  <p>anak pertama</p>
  <p>anak kedua</p>
  <p>anak ketiga</p>
  <p>anak keempat</p>
</div>
CSS
div p:nth-child(2) {
  background-color: yellow
}

Contoh diatas, Kita analogikan seperti ini:

  • Dalam kode HTML diatas, elemen <div>...</div> adalah orang tua (parent) yang memiliki anak (children) sebanyak 4 ( yaitu elemen <p>...</p> sebanyak 4 baris)
  • Contoh:
    kita ingin menyeleksi anak kedua saja, maka didalam css kita tulis:
    div p:nth-child(2)
    Yang artinya:
    div = orang tua
    p = anak dari div
    :nth-child(X) = Dalam contoh pertama ini, kita ganti X dengan angka 2 seperti ini: nth-child(2) yang artinya urutan anak ke 2, Sehingga:
    div p:nth-child(2) {
    background: yellow
    }
    
    Artinya, div yang memiliki anak p urutan ke 2 (anak kedua) memiliki style background yellow (background berwarna kuning).

Kode diatas dapat dilihat hasilnya pada contoh lengkap demo editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo CSS nth-child - apacara.com</title>
    <style>
      div p:nth-child(2) {
          background-color: yellow
      }
    </style>
  </head>
  <body>
    <div>
        <p>anak pertama</p>
        <p>anak kedua</p>
        <p>anak ketiga</p>
        <p>anak keempat</p>
    </div>
  </body>
</html>
TIPS

Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.

Contoh 2
:nth-child(3n)

nth-child dengan formula (3n).

HTML
<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li>list 4</li>
  <li>list 5</li>
  <li>list 6</li>
  <li>list 7</li>
  <li>list 8</li>
  <li>list 9</li>
  <li>list 10</li>
</ul>
CSS
li:nth-child(3n) {
background-color: red;
}

3n bisa diartikan setiap kelipatan 3 dan dimulai dari anak ke-3. Kode diatas, menyeleksi <li> anak ke-3 dan kemudian setiap kelipatan 3 berikutnya. jadi memilih anak ke- 3, 6, dan 9. Kita bisa menentukan angka berapapun sesuai dengan kelipatan yang kita inginkan.

Contoh 3
:nth-child(odd) dan :nth-child(even)

:nth-child dengan odd dan even sebagai keyword.

Kita gunakan kode HTML pada Contoh Kedua diatas, dan kode CSS-nya adalah sebagai berikut:

CSS
li:nth-child(odd) {
  background-color: red;
}
li:nth-child(even) {
  background-color: yellow;
}

odd artinya ganjil, jadi menyeleksi "anak" dengan urutan ganjil, yaitu: 1, 3, 5, 7 dan 9. Sedangkan even adalah kebalikannya, yaitu genap, jadi menyeleksi "anak" ke 2, 4, 6, 8 dan 10.

Contoh 4
:nth-child(n+4)

Masih menggunakan kode HTML dari Contoh Kedua diatas, dan dengan CSS berikut:

CSS
li:nth-child(n+4) {
  background-color: yellow;
}

Artinya, menyeleksi semua <li> dari anak ke-4 dan seterusnya (menyeleksi anak ke 4, 5, 6, 7, 8, 9 dan 10).

Contoh 5
:nth-child(-n+4)

Dengan menggunakan kode HTML dari Contoh Kedua diatas, dan dengan CSS berikut:

CSS
li:nth-child(-n+4) {
  background-color: yellow;
}

Artinya menyeleksi semua <li> dari anak ke-4 dan kebawahnya (hingga angka terendah yang menunjukkan minus). Ini menyeleksi anak ke 4, 3, 2, dan 1.

Kesimpulan!

Dari contoh nth-child(n+4) dan nth-child(-n+4) diatas, dapat diambil kesimpulan: Jika n adalah positif (bukan -n) maka penyeleksiannya dari "anak" pertama hingga "anak" terakhir, sedangkan jika negatif (-n) maka penyeleksiannya dari "anak" terakhir hingga "anak" pertama (sampai dengan angka yang ditentukan setelah +).

Contoh 6
:nth-child(2n+3)

CSS
li:nth-child(2n+3) {
  background-color: yellow;
}

2n+3 = 3, artinya penyeleksian dimulai dari anak ke-3.
2n = artinya setiap kelipatan dua.

Jadi, pertama seleksi anak ketiga, kemudian teruskan penyeleksian dengan kelipatan dua dari anak ketiga tersebut. Hasilnya, yang terseleksi adalah anak ke-3, 5, 7 dan 9.


Contoh 7
:nth-child(-2n+9)

CSS
li:nth-child(-2n+9) {
  background-color: red;
}

-2n+9 = 9, artinya penyeleksian dimulai dari anak ke 9.
-2n = artinya setiap kelipatan dua (minus kebawahnya (urutan angka dari tinggi hingga terendah)).

Jadi, pertama seleksi anak kesembilan, kemudian penyeleksian minus dengan kelipatan dua dari anak kesembilan tersebut hingga angka terendah. Hasilnya, yang terseleksi adalah anak ke 9, 7, 5, 3 dan 1.

SHARE