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, elemanların sırasını ifade etmek için kullanılır.

nth-child(n)

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

nth-child(n+5)

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)

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

nth-child(an+b)

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.

CSS’te nth-child() özelliğinin iki belirleyicisi bulunur. Bunlar tek satırlarını ifade eden odd ve çift satırları ifade eden even belirleyicileridir.

nth-child(odd)

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

nth-child(even)

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

last-child

Listedeki son elemanı seçer.

nth-last-child(2)

Listede, sondan ikinci elemanı seçer.

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

Kafanıza Takılan Sorular