: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
|
1 2 3 4 5 |
element:nth-child(deger){ } |
Son elementten seçime başlar
|
1 2 3 4 5 |
element:nth-last- child(deger){ } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="sayfa"> <div class="kutu">1</div> <div class="kutu">2</div> <div class="kutu">3</div> <div class="kutu">4</div> <div class="kutu">5</div> <div class="kutu">6</div> <div class="kutu">7</div> <div class="kutu">8</div> <div class="kutu">9</div> <div class="kutu">10</div> <div class="kutu">11</div> <div class="kutu">12</div> <div class="kutu">13</div> <div class="kutu">14</div> <div class="kutu">15</div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
body{ background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .sayfa{ width: 960px; margin:auto; } .kutu{ box-sizing: border-box; width: 150px; height: 150px; line-height: 150px; background: #3498db; float: left; border:5px solid #34495e; margin:5px; text-align: center; font-size: 300%; color:#fff; } |
Ekran Çıktısı:
Nth-Child Örnekleri
1) ilk elmentin arkaplan rengini turuncu yapın.
CSS:
|
1 2 3 4 5 |
.kutu:nth-child(1){ background: #e67e22; } |
2) Sondan 3. elementi seçiniz.
CSS:
|
1 2 3 4 5 |
.kutu:nth-last-child(3){ background: #e67e22; } |
3) Tek olan elementleri seçiniz.
CSS: oddile
|
1 2 3 4 5 |
.kutu:nth-child(odd){ background: #e67e22; } |
CSS: formül ile:
|
1 2 3 4 5 |
.kutu:nth-child(2n-1){ background: #e67e22; } |
4) Çift olan elementleri seçiniz.
CSS: even ile
|
1 2 3 4 5 |
.kutu:nth-child(even){ background: #e67e22; } |
CSS: formül ile
|
1 2 3 4 5 |
.kutu:nth-child(2n){ background: #e67e22; } |
5) Altının katı olan elementleri seçiniz.
CSS:
|
1 2 3 4 5 |
.kutu:nth-child(6n){ background: #e67e22; } |
6) İlk sütundaki elementleri seçiniz.(1,7,13 ..)
CSS:
|
1 2 3 4 5 |
.kutu:nth-child(6n+1){ background: #e67e22; } |
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:
|
1 2 3 4 5 |
.kutu:nth-child(7n+1){ background: #e67e22; } |
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:
|
1 2 3 4 5 |
.kutu:nth-child(6n+2){ background: #e67e22; } |
9)Aşağıdaki gibi bir seçme işlemi nasıl yapılır?
CSS:
|
1 2 3 4 5 |
.kutu:nth-child(5n-3){ background: #e67e22; } |
Merhaba; wordpress teması tasarlamaya çalışıyorum. acemiyim. bir soru sormak istiyorum. ana sayfada listelenen makalelerin ketegoriye göre arka planlarının farklı renkte olmasını istiyorum. css deki bu değişkenle bunu yapabilmem mümkün mü? istedim şey bu fotoğrafta. ben de kutu şeklinde yaptım ana sayfa listelemesini. ancak hepsi aynı renkte. kategoriye göre renklerinin farklı olmasını istiyorum.
https://images2.imgbox.com/af/80/3idIApnH_o.jpg
[…] […]