Psewdoklass nth-last-of-type

Psewdoklass nth-last-of-type, ahyryndan sanap, ataň görnüşi boýunça n-nji neberesi bolýan elementleri saýlaýar. nth-of-type psewdoklasy ýaly hereket edýär, ýöne sanaw ahyryndan başlaýar.

Sintaksis

cssselektor:nth-last-of-type(san | odd | even | aňlatma) {
  
}

Görnüşleri

Görnüşi	Düşündiriş
san	`1`-den başlap, pozitiw san. Ýüz tutmak isleýän elementimiziň nomerini kesgitleýär. Elementleriň nomirlendirilişi `1`-den başlaýar.
`odd`	Taq sanly elementler.
`even`	Jüp sanly elementler.
aňlatma	Bütin sanlary nol (birlikden däl) çäklisizlikden nähli sanlary aňladýan n harpy bilen ýörite aňlatmalar düzüp bolýar. Şeýlelikde, `2n` - ähli jüp sanlary aňladýar (ikinjiden başlap). Muny nähli düşünmeli? `n` içine noldan `0` başlap yzygiderlik sanlary goýýarys: eger n = 0 bolsa, 2n 0 berer - şeýle element ýok (elementleriň nomirlendirilişi 1-den başlaýar), eger n = 1 bolsa, 2n 2 berer - ikinji element, eger n = 2 bolsa, 2n 4 berer - dördünji element. Eger 3n ýazsaňyz - bu her üçünji element bolýar (üçünjiden başlap), we ş.m.

Mysal

Ahyryndan sanap, atanyň içindäki ikinji h2 görnüşli 2-nji h2 elementini tapalyň:

html<div>
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
</div>

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

Результат:

Mysal

Ahyryndan sanap, ähli jüp h2-leri tapalyň:

html<div>
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
</div>

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

Результат:

Mysal

Ahyryndan sanap, ähli taq h2-leri tapalyň:

html<div>
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
  
  <h2>sargyt</h2>
  <p>abzas</p>
</div>

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

Результат: