CSS gt lt yerine "nth-child () " Kullanımı

08.09.2017
• Yazilim • Nasil-Yapilir • Bilgisayar

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...