Listelerde kullanabileceğiniz nth-child komutunun gizli yanlarını keşfedin. Sayfanızdaki listelerde kullanabileceğiniz nth-child komutu işinizi kolaylaştırabilir. n harfi matematikten de bildiğimiz belirsiz sayıdır aslında. Örneklerle inceleyelim.

nth-child(n)

li:nth-child(5) {
    color: red;
}

Listedeki 5. elementi seçer. Bu 5. element üzerinde istediğiniz css’i uygulayabilirsiniz.

nth-child(n+5)

li:nth-child(n+5) {
    color: red;
}

5. elementten sonrakileri seçmek için bu komutu kullanın. 5. ve 5. elementten sonrakileri seçmek istiyorum, anlamındadır.

nth-child(-n+5)

li:nth-child(-n+5) {
    color: red;
}

İlk 5 elemanı seçmek için kullanılır.

nth-child(an+b)

li:nth-child(4n+1) {
    color: red;
}

1. (b) elemanından başla ve 4 (a) aralık vererek css’i elemanlara uygula anlamındadır. 1., 1+4=5., 5+4=9. elemanları seçecektir.

nth-child(odd)

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

Listede tek olanları seçer, 1, 3, 5 gibi.

nth-child(even)

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

Listede çift olanları seçer. 2, 4, 6 gibi.

last-child

li:last-child {
    color: red;
}

Listedeki son elemanı seçer.

nth-last-child(2)

li:nth-last-child(2) {
    color: red;
}

Listede, sondan ikinci elemanı seçer.

CSS-Tricks‘in sitesinde bu kodları test edebileceğiniz demo bir sayfa mevcut.