CSS ve HTML ile zor Nth-Child işlemi, belirli koşulları sağlayan belirli öğeleri hedef almak için kullanılabilir. Bu, dinamik olarak oluşturulan içeriklerde veya belirli özelliklere sahip öğelerin özelleştirilmesinde kullanışlıdır.
Örneğin, bir liste öğesinin etiketi içinde belirli koşulları sağlayan öğeleri hedef almak için Nth-Child işlemi kullanılabilir. Bu öğeleri özelleştirerek renk, arka plan, kenarlık, font vb. ayarlarını yapabilirsiniz.
Aşağıda bir örnek verilmiştir:
HTML kodu:
<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>
CSS kodu:
ul li:nth-child(4n+1) {
background-color: #f00;
color: #fff;
font-weight: bold;
}
ul li:nth-child(4n+2) {
background-color: #0f0;
color: #fff;
}
ul li:nth-child(4n+3) {
background-color: #00f;
color: #fff;
}
ul li:nth-child(4n+4) {
background-color: #ff0;
color: #fff;
}
Bu örnek, 4’ün katları olan öğeleri hedef alarak arka plan rengini, yazı rengini ve yazı biçimini değiştirir. Bu nedenle, 1, 5, 9 gibi öğeler kırmızı arka plan ve kalın yazı tipiyle görüntülenir, 2, 6, 10 gibi öğeler yeşil arka planla görüntülenir, 3, 7 gibi öğeler mavi arka planla görüntülenir ve 4, 8 gibi öğeler sarı arka planla görüntülenir.
Bu örnek, Nth-Child işleminin belirli koşulları sağlayan öğeleri hedef almak için kullanışlı bir araç olduğunu göstermektedir.
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.