Css ile Tablo Satırlarını Farklı Renkte Yapmak: Nth-Child Özelliği

Css yazarken tablo ve liste gibi elementlere ek özellikler vermeniz gerekebilir.
Örneğin bir tablo hazırladınız bu tablonun satırlarının farklı renklerde olmasını istiyorsunuz işte bu gibi durumlarda Nth-Child özelliği imdadınıza yetişiyor.

Kullanımı: Kullanılacak elementten sonra : konularak nth-child(kaçıncı element olduğu belirtilir)

Örneğin: table tr:nth-child(even) {background:red;}

even:Bu stili 1,3,5 gibi tek sayılı satırlara uygula demek, yani yazdığımız css tablonun tek sayılı satırlarına uygulanır.

Diğer Özelliklere Bakalım:

nth-child(odd)
Ör. table tr:nth-child(odd) {background:red;} //Stili tek sayı olanlara uygula

nth-child(even)
Ör. table tr:nth-child(even) {background:red;} //Stili çift sayı olanlara uygula

nth-child(n)
Ör. table tr:nth-child(3) {background:red;} //Stili 3. satıra uygula

nth-child(n+3)
Ör. table tr:nth-child(n+3) {background:red;} //Stili 3 ve 3den sonraki satırlara uygula

nth-child(-n+3)
Ör. table tr:nth-child(-n+3) {background:red;} //Stili ilk 3 satıra uygula

last-child
Ör. table tr:last-child{background:red;} //son satıra uygula

nth-last-child(3)
Ör. table tr:nth-last-child(3){background:red;} //sondan 3. satıra uygula