CSS Nth-Child Kullanımı

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.
li ile listelenmiş birkaç satırlık kod olduğunu varsayalım. Bu koda da aşağıdaki örneklerle nth-child uygulayalım.

nth-child(n)

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

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

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.

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

nth-child(-n+5)

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

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

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.

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

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.

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

nth-child(even)

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

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

last-child

Listedeki son elemanı seçer.

li:last-child {
    color: red;
}

nth-last-child(2)

Listede, sondan ikinci elemanı seçer.

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

CSS-Tricks‘in sitesinde :nth Tester adında bu kodları test edebileceğiniz demo bir sayfa mevcut. Bu sayfada nth-child kullanımını test edebilir ve öğrendiklerinizi pekiştirebilirsiniz.

Popular Eğitimler

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?

CSS Web Sitelerinde Kaydırma Çubuğu Renk Değiştirme

Bu HTML ve CSS eğitiminde herhangi bir JavaScript dosyası kullanmadan yandaki ScrollBar’ı…

Portfolyo Sayfaları için JavaScript TypeWriter Efekti

Daha çok portfolyo veya ajans sitelerinde gördüğümüz tarzda bir daktilo yazım efekti…

HTML’de Faydalı 5 Harika Visual Studio Code Eklentisi

Bir süredir VS Code kullanıyorum ve kesinlikle VS Code kullanımını çok pratik…

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

CSS Nedir ve Nasıl Kullanılır?

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru…