CSS gt lt yerine "nth-child () " Kullanımı
CSS gt lt yerine "nth-child () " Kullanımı
CSS de greater than ve less than anlamına gelen gt ve lt gibi veya eq gibi eleman (html element selector) seçicileri bulunmaz. lt, gt ve eq ifadeleri jquery 'ye ait seçicileridir.Ancak gt ve lt ile benzer işlemi yapan nth-child () , bu ifadelerin sağladığı fonksiyonları sağlamak çok kolaydır.
Bir parent in altındaki elemanlara rahatlıkla aşağıdaki gibi uygulanabilir.
nth-child Farklı Kullanımları
n nin değeri varsayımsal olarak başlanıgçta sıfırdır ve css3 motoru her child da +1 yaparak diğer uyan child lara kuralı uygular. Eğer iç formül i arttıkça negatife döner ise negatif çocuklar olmadığı için otomatik olarak duracaktır.:first-child ifadesi ilk çocuk
:last-child ifadesi son çocuk
:nth-child () ifadesi ise parantez içi formüle uyan çocuk/lar
Örneğin:
:nth-child (n+5) ifadesi 5, 6, 7, ... ve sonrası formüle uyan çocuklara etki edecektir.
:nth-child (2n+5) ifadesi 5, 7, 9, ... ve sonrası formüle uyan çocuklara etki edecektir.
:nth-child (-n+7) ifadesi 1, 2, 3, 4, 5, 6, 7.
:nth-child (-3n+8) ifadesi 2, 5, and 8
:nth-child (2) ifadesi sadece 2 inci çocuk
CSS nth-child ile Tabloda Zebra Görünüm
table tr:nth-child (2n) {
background:lightgray;
}
Kolay gelsin...