Pseudo-sınıf nth-last-of-type

nth-last-of-type pseudo-sınıfı, ebeveyne göre belirli türden n. elemanı seçer, sondan sayar. nth-of-type gibi davranır, sadece sayım sondan başlar.

Sözdizimi

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

Değerler

Değer	Açıklama
sayı	`1`'den başlayan pozitif bir sayı. Erişmek istediğimiz elemanın numarasını belirtir. Eleman numaralandırması `1`'den başlar.
`odd`	Tek numaralı elemanlar.
`even`	Çift numaralı elemanlar.
ifade	n harfini kullanarak özel ifadeler oluşturulabilir, n, sıfırdan (birden değil) sonsuza kadar tüm tamsayıları temsil eder. Böylece, `2n` - tüm çift numaralı elemanlar demektir (ikinciden başlayarak). 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 eleman yoktur (eleman numaralandırması 1'den başlar), eğer n = 1 ise, 2n 2 verir - ikinci eleman, eğer n = 2 ise, 2n 4 verir - dördüncü eleman. Eğer 3n yazılırsa - bu her üçüncü eleman olur (üçüncüden başlayarak), ve böyle devam eder.

Örnek

Ebeveyndeki sondan 2. h2 elemanını bulalım:

html<div>
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
</div>

cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

Örnek

Sondan sayıldığında tüm çift numaralı h2'leri bulalım:

html<div>
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
</div>

cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

Örnek

Sondan sayıldığında tüm tek numaralı h2'leri bulalım:

html<div>
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
  
  <h2>başlık</h2>
  <p>paragraf</p>
</div>

cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат: