CSS’te :nth-child() özelliği, belirli öğelerin belli bir desene veya sıraya göre biçimlendirilmesine olanak tanır. Örneğin, her üçüncü öğeyi seçerek onları farklı bir stil uygulayabilirsiniz.
Basit bir örnek için, aşağıdaki HTML kodunu inceleyelim:
<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> <li>Öğe 7</li> <li>Öğe 8</li> <li>Öğe 9</li> <li>Öğe 10</li> </ul>
Bu kodda, bir ul liste öğesi içinde 10 adet li öğesi var. Bu öğeleri tek tek seçmek yerine, :nth-child() özelliğini kullanarak onları bir desene göre seçebiliriz.
Örneğin, her iki öğeden birini seçerek onları farklı bir renge boyayabiliriz. Bunun için aşağıdaki CSS kodunu kullanabiliriz:
css
li:nth-child(2n) {
background-color: lightgray;
}
Burada, :nth-child(2n) seçicisini kullanarak, her iki öğeden birini seçiyoruz (yani, 2’ye tam bölünebilen öğeleri). Bu öğeleri gri bir arka plan rengiyle biçimlendiriyoruz.
Bu kodu denemek için aşağıdaki örnek kodu deneyebilirsiniz:
<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>
<li>Öğe 7</li>
<li>Öğe 8</li>
<li>Öğe 9</li>
<li>Öğe 10</li>
</ul>
<style>
li:nth-child(2n) {
background-color: lightgray;
}
</style>
Bu kod, sayfadaki her iki öğeden birini seçerek onları gri bir arka plan rengiyle biçimlendirir.
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.