nth-child Sözde Sınıfı
nth-child sözde sınıfı,
ebeveyninin n. çocuğu olan öğeyi seçer.
Sözdizimi
seçici:nth-child(sayı | odd | even | ifade) {
}
Değerler
| Değer | Açıklama |
|---|---|
| sayı |
1'den başlayan pozitif bir sayı.
Erişmek istediğimiz öğenin numarasını belirtir.
Öğe numaralandırması 1'den başlar.
|
odd |
Tek numaralı öğeler. |
even |
Çift numaralı öğeler. |
| ifade |
N harfini kullanarak özel ifadeler oluşturulabilir; burada n,
sıfırdan (birden değil) sonsuza kadar tüm tamsayıları temsil eder.
Böylece, 2n - tüm çift numaralı öğeleri (ikinciden başlayarak) ifade eder.
Bu nasıl anlaşılır? n yerine sırayla 0 ve sonrasındaki sayılar konur:
eğer n = 0 ise, 2n 0 verir - böyle bir öğe yoktur (öğe numaralandırması 1'den başlar),
eğer n = 1 ise, 2n 2 verir - ikinci öğe, eğer n = 2 ise,
2n 4 verir - dördüncü öğe. Eğer 3n yazılırsa - bu
her üçüncü öğe (üçüncüden başlayarak) olacaktır, ve benzeri şekilde.
|
Örnek
Bu örnekte, ebeveyninin 4. çocuğu olan
li öğesini kırmızı renk yapacağız:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Örnek
Şimdi tüm çift li öğelerini kırmızı yapalım:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Örnek
Şimdi tüm tek li öğelerini kırmızı yapalım:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Örnek
Şimdi her üçüncü
li öğesini (üçüncüden başlayarak) kırmızı yapalım:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Örnek
Seçicide bir öğe aralığı belirtebilirsiniz.
Diyelim ki, 20 öğeden oluşan bir listeniz var
ve 7'den 14'e kadar (dahil) olan öğeleri seçmeniz gerekiyor.
Bu şu şekilde yapılabilir:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
