CSS :nth-child Sözde Sınıfı

N.ci çocuk elemanı seçmek için bu sözde sınıfı kullanıyoruz. Ancak bu sözde sınıf, göründüğünden çok daha fazlasını yapabiliyor.

<ul>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
    <li>liste elemanı</li>
</ul>

Yukarıdaki gibi bir HTML yapımızda, 3. li etiketini seçmek için sözde sınıfı şöyle kullanabilirim;

ul li:nth-child(3) {
    background-color: lime;
}

Sonuç;

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

Başka neler yapabiliyoruz bu sözde sınıf ile gelin başlık başlık inceleyelim.

Tek Değerli (1-3-5) Elemanları Seçmek

Bunun için odd değerini kullanmamız yeterli.

ul li:nth-child(odd) {
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

Çift Değerli (2-4-6) Elemanları Seçmek

Bunun için even değerini kullanmamız yeterli.

ul li:nth-child(even) {
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

Her n Elemanda Birini Seçmek

Örneğin her 3 li etiketinde bir seçme işlemi yapmak isteseydik şöyle kullanacaktım;

ul li:nth-child(3n) {
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

Tabi bu şekilde 3. liyi seçerek başladı. Aynı işlemi ilk li etiketini seçerek başlatmak isteseydik +1 2. li etiketini seçerek başlatmak isteseydik +2 koymamız yeterliydi.

ul li:nth-child(3n+1){
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

n Eleman ve Sonrasını Seçmek

Örneğin 4. eleman ve sonrasını seçmek isteseydik;

ul li:nth-child(n+4){
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

n Eleman ve Öncesini Seçmek

Örneğin 6. eleman ve öncesini seçmek isteseydik;

ul li:nth-child(-n+6){
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

n Eleman ile n Eleman Arasındakileri Seçmek

Örneğin 4 ile 8 arasındaki elemanları seçmek isteseydik;

ul li:nth-child(n+4):nth-child(-n+8) {
    background-color: lime;
}

• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı
• liste elemanı

Tabi burada da önemli olan ebeveyn etiketin n.ci çocuğunun seçeceğimiz etiket olması. Yani aşağıdaki gibi bir HTML yapısında;

<div>div etiketi</div>
<div>div etiketi</div>
<p>p etiketi</p>
<div>div etiketi</div>

3. div etiketini şu şekilde seçemeyiz!

div:nth-child(3) {
    background-color: lime;
}

Çünkü 3. değerde aslında div değil p etiketi var. :nth-child() sözde sınıfı etiketin tipine bakmaksızın pozisyonuna göre seçmeye çalışıyor. Eşleşmeyeceği içinde seçme işlemini gerçekleştirmiyor. Bunu yapabilmek için bir sonraki derste :nth-of-type() sözde sınıfını kullanacağız.