Cara Memakai Fungsi nth-child Selector
Selain ada beberapa macam Selecetor Dasar dan juga Pseudo Selector, CSS juga memiliki selector lainnya yang bernama nth-child. nth-child merupakan seletor yang digunakan untuk menyeleksi element child (anak) yang ada di dalam element parent (induk). 
Contoh dari element child atau anak adalah apabila element tersebut berada di dalam element parent atau induk seperti <li> dan </li> berada di dalam element <ul> dan penutupnya </ul>. Dengan demikian tag <ul> disebut element parent sedangkan tag <li> disebut child.
Cara Penggunaan nth-child Selector
Untuk menggunakan selector ini kita harus memilih element child dan menggunakan syntax :nth-chil(x)x disini dalam artian untuk memilih element child yang kita seleksi untuk diberi style
x bisa ditulis dengan berbagai macam kode seperti:
1. number/angka : 1,2,3,4,dst
2. keyword/kata kunci : odd, even, dll
3. formula/rumus : 3n , n+5 , -n+5 , 2n+4 , -2n+8 ,dll
Baca juga :
Memahami Konsep Pseudo Class Dan Pseudo Element Pada CSS
Cara Menggunakan Selector Pada Kode CSS
Mengenal Macam Macam Selector Pada Kode CSS
Contoh pertama
<html> <head> <title>Belajar nth-child</title> <style> div p:nth-child(3) {color:red} </style> </head> <body> <div> <p>anak pertama</p> <p>anak kedua</p> <p>anak ketiga</p> <p>anak keempat</p> <p>anak kelima</p> </div> </body> </html>
Jika kalian menyalin dan menjalankan kode di atas ke HTML Editor kalian maka hasilnya akan menjadi seperti ini
Contoh kedua
<html> <head> <title>Belajar nth-child</title> <style> ul li:nth-child(odd) {color:yellow} ul li:nth-child(even) {color:green} ul li:first-child {color:red} ul li:last-child {color:blue} </style> </head> <body> <ul> <li>anak pertama</li> <li>anak kedua</li> <li>anak ketiga</li> <li>anak keempat</li> <li>anak kelima</li> <li>anak keenam</li> <li>anak ketujuh</li> <li>anak kedelapan</li> <li>anak kesembilan</li> <li>anak kesepuluh</li> </ul> </body> </html>
- :nth-child(odd) berfungsi menyeleksi anak dengan urutan angka ganjil seperti angka 1,3,5,7,9,dst
- :nth-child(even) berfungsi menyeleksi anak dengan urutan angka genap seperti angka 2,4,6,8,10,dst
- :first-child untuk menyeleksi anak pertama
- :last-child untuk menyeleksi anak terakhir
Contoh ketiga
ul li:nth-child(3n) {property: value;}
(Masih menggunakan kode yang sama seperti contoh nomor dua). (3n) dapat di artikan sebagai kelipatan angka pada penyeleksian child, jadi selector tersebut akan menyeleksi mulai dari anak ke- 3 dan kelipatannya yaitu 6,9,12,15,dst. Kita bisa memilih kelipatannya menjadi angka berapapun yang kita pilih.
Contoh keempat
ul li:nth-child(n+5) {property: value;}
(n+5) memiliki arti bahwa dia akan menyeleksi mulai dari anak (positif) ke- 5 hingga seterusnya yaitu anak ke- 5,6,7,8,9,10,dst
Contoh kelima
ul li:nth-child(n-5) {property: value;}
(n-5) jika tadi menggunakan tanda plus (+) akan menyeleksi anak ke- 5 dan seterusnya, maka tanda minus (-) akan menyeleksi anak ke-5 dan sebelumnya yaitu anak ke- 5,4,3,2,1
Contoh keenam
ul li:nth-child(2n+4) {property: value;}
Ternyata kita juga bisa melakukan kombinasi pada formula selector nth-child supaya kita dapat menyeleksi secara mendetail.
(2n+4) artinya adalah tanda plus (+) untuk menyeleksi anak selanjutnya, angka 2 sebagai kelipatan dan angka 4 sebagai dimulainya penyeleksian, jadi dia akan mulai menyeleksi dari anak ke- 4,6,8,10,dst
Contoh ketujuh
ul li:nth-child(2n-8) {property: value;}
Sama seperti contoh sebelumnya namun ini adalah kebalikannya.
(2n-8) tanda minus (-) untuk menyeleksi anak sebelumnya, angka 2 sebagai angka kelipatan dan angka 8 sebagai tanda untuk dimulainya penyeleksian, jadi dia akan menyeleksi anak ke- 8,6,4,2,dst