CSS

CSS :nth-child Kullanımı ve Örnekleri

:nth-child bir formüle göre daha fazla elementi seçmek için kullanılır.  CSS 3 Seçiciler içinde “structural pseudo-class” yani yapısal sınıflar kategorisi içinde yer alırlar.  Ebeveyn ve kardeş ilişkilerine göre seçme prensibine göre çalışmaktadır.

Nth-Child Kullanımı

İlk elementen seçime başlar

 

Son elementten seçime başlar

 

Görüldüğü gibi nth-child deger yerine bir tam sayı değeri alabilir. Aldığı tam sayı değeri ilgili sıradaki elementi seçmek için kullanılır.  deger yanı sıra formül yada tek(odd)  ve çift(even) elementleri seçmek için de özel değerler kullanılır.

  • deger: tam sayı türünde bir değer girilebilir.
  • deger: even (çift), odd (tek) değerleri girilebilir.
  • deger: an+b şeklinde bir formül gir8ilebilir. a ve b tam sayı değeri olup, a katlanarak gidecek sayıyı, b ise başlangıç değeri olan tam sayıyı ifade eder. + sembolü yerine – (eksi)  sembolü de kullanılabilir.

an+b kullanımı ile ilgili örnek. 2n+1 şeklinde yazdığımızda  sırasıyla şu şekilde seçmeye başlayacaktır.

2*0+1 =  1 ,
2*1+1  = 3 ,
2*2+1  = 5 ,
2*3+1  = 7,
2*4+1 = 9 ,
2*5+1  = 11
………….. şeklinde devam edecektir.

an+b kullanımı ile ilgili örnek. 3n-2 şeklinde yazdığımızda  sırasıyla şu şekilde seçmeye başlayacaktır.

3*0-2  = (eksi olduğu için seçim yok),
3*1-2  = 1,
3*2-2 = 4,
3*3-2 = 7,
3*4-2 = 10,
3*5-2 = 13,
……….. şeklinde devam edecektir.

 

 

 

Aşağıdaki gibi bir sayfa oluşturup :nth-child örneklerini oluşturmaya başlayalım.

HTML:

CSS:

Ekran Çıktısı:

 

Nth-Child Örnekleri

 

1)  ilk elmentin arkaplan rengini turuncu yapın.

CSS:

 

2) Sondan 3. elementi seçiniz.

CSS:

 

3) Tek olan elementleri seçiniz.

CSS: oddile

CSS: formül ile:

 

4) Çift olan elementleri seçiniz.

CSS: even ile

CSS: formül ile

 

5) Altının katı olan elementleri seçiniz.

CSS:

 

6) İlk sütundaki elementleri seçiniz.(1,7,13 ..) 

CSS:

 

7) Şekildeki gibi 1,8 ve 15. elementleri seçiniz.( Seçim işleminde dikkat edilmesi gereken aradaki farktır. fark n çarpanını işaret edecektir.)

CSS:

 

8) İkinci sütundaki değerleri seçiniz. (Yine aynı şekilde aradaki farka bakıp sayı arttırılacak mı eksiltilecek mi karar verilir. Aradaki fark 6 olduğu için 6n çarpanı vardır. başlangıç değeri de 2den başlamıştır.

CSS:

 

9)Aşağıdaki gibi bir seçme işlemi nasıl yapılır?

CSS:

 

 

 

Yorum Yap