Deskripsi
Pengertian & Penjelasan

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.

<div>
    <p>anak pertama</p>
    <p>anak kedua</p>
    <p>anak ketiga</p>
    <p>anak keempat</p>
</div>
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
Demo dengan Source Code Editor

Demo Editor
Demo CSS :nth-child
Code Editor
  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).

<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>
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 CSSnya adalah sebagai berikut:

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:

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:

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)

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)

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.