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

nth-last-child sözde sınıfı, ebeveynden sondan sayılan n'inci çocuk öğeyi seçer. nth-child gibi davranır, ancak sayım sondan başlar.

Sözdizimi

cssseçici:nth-last-child(sayı | odd | even | ifade) {
  
}

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 harfi kullanılarak özel ifadeler oluşturulabilir. N harfi, sıfırdan (birden değil) sonsuza kadar tüm tam sayıları temsil eder. Böylece, `2n` tüm çift sayıları anlamına gelir (ikinciden başlayarak). Bu nasıl anlaşılır? `n` içine sırayla `0` ve sonrasındaki sayılar yerleştirilir: eğer n = 0 ise, 2n 0 verecektir - böyle bir öğe yoktur (öğe numaralandırması 1'den başlar), eğer n = 1 ise, 2n 2 verecektir - ikinci öğe, eğer n = 2 ise, 2n 4 verecektir - dördüncü öğe. Eğer 3n yazılırsa - bu her üçüncü öğe olacaktır (üçüncüden başlayarak), vb.

Bu örnekte, ebeveyninin sondan 4'üncü çocuğu olan li'yi 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-last-child(4) {
  color: red;
}

Результат:

Şimdi sondan sayılan tüm çift li'leri kırmızı 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-last-child(even) {
  color: red;
}

Результат:

Şimdi sondan sayılan tüm tek li'leri kırmızı 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-last-child(odd) {
  color: red;
}

Результат:

Şimdi sondan sayılan her üçüncü li'yi kırmızı 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-last-child(3n) {
  color: red;
}

Результат: