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

nth-child sözde sınıfı, ebeveyninin n. çocuğu olan öğeyi seçer.

Sözdizimi

cssseç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:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Örnek

Şimdi tüm çift li öğelerini kırmızı yapalım:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Örnek

Şimdi tüm tek li öğelerini kırmızı yapalım:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Örnek

Şimdi her üçüncü li öğesini (üçüncüden başlayarak) kırmızı yapalım:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli: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:

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

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: