:nth-child merupakan sebuah selektor pada css yang memungkinkan Anda untuk menyeleksi child element satu atau lebih berdasarkan urutan tertentu terhadap parentnya. Selektor :nth-child ini masuk dalam kategori ” structural pseudo-class ” yang telah dijelaskan pada CSS Selectors Level 3 spec.
Baca : Dasar Css: Selektor pada Css
Penggunaan selektor :nth-child dengan formula dasar seperti dibawah ini:
li:nth-child(1) { }
li:nth-child(2) { }
li:nth-child(3) { }
Perlu diketahui, sama seperti selektor lainnya :nth-child dapat dikombinasikan atau digabungkan dengan selektor lainnya. Termasuk selektor :nth-child itu sendiri, dan dapat disesuaikan dengan kebutuhan Anda. Sebagai contoh kombinasi :nth-child sebagai berikut
li:nth-child(3n - 2) { }
li:nth-child(3n - 1) { }
li:nth-child(n + 3) { }
Argumen
Seperti penjelasan diatas selektor :nth-child dapat dikombinasikan dengan selektor lainnya, lalu apakah yang dimaksud dengan argumen? Argumen merupakan sebuah selektor tambahan yang terdiri dari keyword, numeric, dan formula. Dapat dilihat pada contoh diatas setelah penulisan :nth-child dibarengi dengan sebuah (n+3) itu menandakan sebuah argumen.
- Argumen keyword
Argumen keyword yang dapat digunakan untuk kombinasi pada selektor :nth-child adalah odd dan even. Argumen odd akan menyeleksi semua elemen yang berada di urutan ganjil saja. Sedangkan even kebalikan dari argumen odd dimana hanya menyeleksi semua elemen yang berada diurutan genap. Sebagai contoh penggunaan argumen odd dan even dibawah ini:
See the Pen odd and even by Pram Eko (@pram-eko) on CodePen.
2. Argumen Numeric
Pada argumen numeric akan menyeleksi elemen berdasarkan urutan yang sesuai dengan angka yang ada pada argumen tersebut. Pada argumen numeric dimulai dari angka 1, angka maksimal tidak terbatas, dan tidak dapat menggunakan angka negatif.
Penulisan kombinasi :nth-child dengan argumen numeric seperti :nth-child(1), argumen ini akan menyeleksi elemen yang berada pada urutan ke-1, :nth-child(2) akan menyeleksi elemen yang berada pada urutan ke-2, dan seterusnya.
Contoh penggunaan argumen numeric pada :nth-child sebagai berikut:
See the Pen Sample :nth-child by Pram Eko (@pram-eko) on CodePen.
3. Argumen Formula
Argumen formula merupakan sebuah argumen yang menggunakan pola an+b dimana:
- a merupakan angka(numeric) dan n merupakan urutab angka yang dimulai dari angka 1 dan selanjutnya dapat menggunakan angka yang bernilai positif maupun negatif. Perlu diperhatikan untuk n tetap ditulis dibelakang angka.
- tanda + merupakan operator, bisa juga menggunakan tanda minus (-).
- b merupakan angka yang digunakan jika formula yang ditulis mengandung operator + maupun –.
Contoh penggunaan argumen formula pada selektor :nth-child
See the Pen Argumen formula by Pram Eko (@pram-eko) on CodePen.
Pada contoh diatas dapat dilihat penggunaan :nth-child(2n) itu artinya elemen yang terseleksi adalah elemen dengan urutan genap, ini hampir sama pada saat Anda menggunakan argumen keyword even. Begitu juga pada :nth-child(2n+1) elemen yang terseleksi hanya pada elemen dengan urutan ganjil, hampir sama pada saat Anda menggunakan argumen keyword odd.
See the Pen nth-child(n+3) by Pram Eko (@pram-eko) on CodePen.
Sedangkan pada contoh diatas penggunaan :nth-child(n+3) artinya elemem yang terseleksi adalah elemen dengan urutan dimulai dari urutan ke-3 dan seterusnya. Sementara itu elemen urutan ke-1 dan ke 2 tidak terseleksi.
