CSS'in kullanım bazında birçok güzelliği söz konusu demek yanlış olmayacaktır. Örneğin bir tablo, listeleme v.b. yapıyorsanız ve buradaki çift ve tek değerleri desenli, renkli bir şekilde sıralamanız mümkündür. Bu işlem için ise "even" ve "odd" adlı seçicileri kullanmamız yeterli olacaktır. İlgili seçicileri dilerseniz tablo, dilerseniz bir div için sorunsuz bir şekilde kullanabilirsiniz. Örnek kodlar ve kullanım şekli aşağıda yer almakta olup, dilediğiniz gibi biçimlendirme işlemi de sağlayabilmektesiniz. Bilmeyenler için faydalı bir ipucu olmasını dileriz.

AYRICA: CSS "nth-child" Nedir? Kullanımı ve Örnekleri

CSS ile Renkli (Desenli) Listeleme Nasıl Yapılır?

1) İlgili CSS kodları aşağıdaki gibidir.

.tablobu li:nth-child(even) {
background-color: #eeeeee;
}
.tablobu li:nth-child(odd) {
background-color: #dddddd;
}

2) İlgili HTML kodları ise aşağıdaki gibi olacaktır.

<div class="tablobu">
<ul>
<li>Alan 1</li>
<li>Alan 2</li>
<li>Alan 3</li>
<li>Alan 4</li>
<li>Alan 5</li>
</ul>
</div>


Not: Yukarıda yer alan kırmızı renkli ifadeler, tek ve çift değerlerin arka plân rengini ifade etmektedir. Dolayısı ile tek ve çift değerlerin arka plânları hangi renk olsun istiyor iseniz, kırmızı renkli ifadeleri değiştirmeniz yeterli olacaktır.