Pseudoklasas nth-last-of-type

Pseudoklasas nth-last-of-type pasirenka elementą, kuris yra n-tasis pagal tipą tėvo palikuonis, skaičiuojant nuo galo. Elgiasi panašiai kaip nth-of-type, tik skaičiavimas vyksta nuo galo.

Sintaksė

cssselektorius:nth-last-of-type(skaičius | odd | even | išraiška) {
  
}

Reikšmės

Reikšmė	Aprašas
skaičius	Teigiamas skaičius nuo `1`. Nurodo elemento, kurį norime pasirinkti, numerį. Elementų numeracija prasideda nuo `1`.
`odd`	Nelyginiai elementai.
`even`	Lyginiai elementai.
išraiška	Galima sudaryti specialias išraiškas su raide n, kuri žymi visus sveikuosius skaičius nuo nulio (ne nuo vieneto) iki begalybės. Taigi, `2n` - reiškia visus lyginius skaičius (pradedant antruoju). Kaip tai suprasti? Į `n` paeiliui įstatome skaičius nuo `0` ir toliau: jei n = 0, tai 2n duos 0 - tokio elemento nėra (elementų numeracija nuo 1), jei n = 1, tai 2n duos 2 - antrasis elementas, jei n = 2, 2n duoda 4 - ketvirtasis elementas. Jei parašysite 3n - tai bus kas trečias elementas (pradedant trečiuoju), ir taip toliau.

Pavyzdys

Raskime h2, kuris yra 2-asis h2 tėve nuo galo:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат:

Pavyzdys

Raskime visus lyginius h2 nuo galo:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат:

Pavyzdys

Raskime visus nelyginius h2 nuo galo:

html<div>
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
  
  <h2>antraštė</h2>
  <p>pastraipa</p>
</div>

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

Результат: