nth-child nedir ve nasıl çalışır?

nth-child web sayfasınadaki sıralı elementler arasında belirli sıradakileri seçmek için kullandığımız bir CSS selector’ıdır.

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.

Peki nth-child ile başka neler yapılabilir? Şimdi onlara örneklerle biraz göz atalım.

5. sıradaki elementin seçimi

5. sıradan sonraki elementlerin seçimi

İlk 5 elementin seçimi

Birinci sıradan başlayarak her 4. elementin seçimi

Tek sayıların seçimi

Çift sayıların seçimi

Sonuncu elementin seçimi

Sondan 2. elementin seçimi

nth-child tarayıcı uyumluluğu

Tarayıcı uyumluluğu konusunda da durum şöyle:

Selector Chrome Internet Explorer Firefox Safari Opera
:nth-child() 4.0 9.0 3.5 3.2 9.6
Bahçeşehir Üniversitesi İletişim Fakültesi Reklamcılık Bölümü mezunu… Web tasarım, front-end geliştirme ve WordPress tema geliştirme ile uğraşmaktadır.
Etiketler:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.