CSS3 :nth-child() Özelliği Kullanımı

CSS3 ile beraber gelen yeni özelliklerden biride :nth-child() seçicisidir bu seçiciyle beraber html elementlerimizin index değerlerine göre belirli veya odd(tek), even(çift) olarak otomatik şekillendirebilirsiniz.

CSS3 :nth-child() özelliği kullanımı

Bu makalemizde ul(unordered list) yapısını kullanarak örnekler vermeye çalışacağım ama siz isterseniz table, ol, dl, select gibi v.b Html elementleri ile rahatça kullanabilirsiniz.

HTML

CSS

Üstteki css kodlarımızdada gördüğünüz gibi nth-child(odd) şeklinde bir tullanımla index değeri tek olan li etiketleri #f5f5f5 kodu ile ve even ilede #ccc renk koduna karşılık gelen renk ile boyanacaktır.

Sonuç

İpucu

:nth-child(5n+3) gibi bir kullanımla 3’üncü index değerinden başla 5’er 5’er atlayarak uygula denmektedir.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın