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.
İçerik
göster
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
1 2 3 4 5 6 7 8 9 10 11 12 | <ul> <li>Menü 1</li> <li>Menü 2</li> <li>Menü 3</li> <li>Menü 4</li> <li>Menü 5</li> <li>Menü 6</li> <li>Menü 7</li> <li>Menü 8</li> <li>Menü 9</li> <li>Menü 10</li> </ul> |
CSS
1 2 3 4 5 6 7 8 | /*li index değeri çift olanlar*/ li:nth-child(even){ background-color: #ccc; } /*li index değeri tek olanlar*/ li:nth-child(odd){ background-color: #f5f5f5; } |
Ü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.
