Çağrı EL

Web Geliştirme | Linux Sunucu Yönetimi | Siber Güvenlik | Eğitim

CSS :nth-child() Selector Nedir?

İlk baş duyduğumda 2 yıl önce tam ne olduğunu bende anlamamıştım. En son geçen gün tekrar karşıma çıktı. Biraz bilgi aldım ama biraz detaylı olarak yazmak istedim. Bu tip CSS selectorlerini daha çok araştırıp detaylandırmak hatta bir seri  yapmak istiyorum. Bu bir başlangıç serisine dahil olamaz tabii ki ancak yine de başlamış olalım :).

nth-child web sayfasında bulunan belirli sırada olan kısımları seçmek için kullanılan bir CSS Selector.

örnek olarak:

ul li:nth-child(3n+3) { background-color: red; }

Yukarıda kendisini ve sonucunu görmüş olduğunuz CSS kodu “li” elementlerinden 3., 6, 9., 12. … yani 3’ün katları olanlarının yazı rengini turuncu yapar.

Yukarıda yazdığımız kodda <li> elementlerinden 3, 6, 9, 12… yani 3’ün katları olanlarının yazı arka plan rengini kırmızı yapıyor.

Örneklerimizi detaylandıralım:

İlk 5 elementi seçip genişlik ve yükseklik verelim:

li:nth-child(-n+5) {
width: 100px;
height:100px;
}

Bugüne kadar bu tip bir yapılandırma bir elin parmağını geçmeyecek kadar projede karşıma çıktığı için hiç kullanmamıştım bu selectoru. Ancak o zamanlar da yapmiş olduğum tüm saçma düzenleri, kaybettiğim zamanı bu kod ile çözebilirmişim. Aslında cok kullanılmasına rağmen ben hala gözden nasıl kaçırıp araştırırken denk gelmemişim diyorum. Demek ki o dönemler bakmak için bakmışım :). Hatanın neresinden dönüp kendimize kazandırırsak paydır.

Back to top