nth-child(odd) ve nth-child(even) seçicileri, CSS’de belirli bir öğeler grubundaki sıfırdan başlayarak tek ve çift sıralı öğeleri seçmek için kullanılır.
Örneğin, aşağıdaki HTML kodunu ele alalım:
html
<ul> <li>Öğe 1</li> <li>Öğe 2</li> <li>Öğe 3</li> <li>Öğe 4</li> <li>Öğe 5</li> <li>Öğe 6</li> </ul> <li> öğeleri için nth-child(odd) seçicisi uygulamak, liste öğelerinin tek sıralı olanlarını seçecektir (1, 3, 5):
css
li:nth-child(odd) {
background-color: #f2f2f2;
}
<li> öğeleri için nth-child(even) seçicisi uygulamak, liste öğelerinin çift sıralı olanlarını seçecektir (2, 4, 6):
css
li:nth-child(even) {
background-color: #f2f2f2;
}
Bu örneklerde, background-color stil özelliği, seçilen öğelerin arka plan rengini belirler. #f2f2f2 burada bir örnek renk kodudur, farklı bir renk kodu kullanabilirsiniz.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.