Pseudoklasse nth-last-of-type

Pseudoklassen nth-last-of-type vælger et element, som er det n'te barn af forælder af specificeret type, tællende fra slutningen. Opfører sig analogt med nth-of-type, kun at tællingen foretages fra slutningen.

Syntaks

cssselektor:nth-last-of-type(tal | odd | even | udtryk) {
  
}

Værdier

Værdi	Beskrivelse
tal	Et positivt tal startende fra `1`. Angiver elementets nummer, som vi ønsker at henvise til. Nummerering af elementer starter fra `1`.
`odd`	Ulige elementer.
`even`	Lige elementer.
udtryk	Man kan sammensætte specielle udtryk med bogstavet n, som betegner alle heltal fra nul (ikke fra et) til uendelig. Således betyder `2n` alle lige tal (startende fra det andet). Hvordan forstår man dette? Vi indsætter i `n` sekventielt tal fra `0` og så videre: hvis n = 0, så giver 2n 0 - et sådant element findes ikke (elementnummerering starter fra 1), hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2, giver 2n 4 - det fjerde element. Hvis man skriver 3n - vil det være hvert tredje element (startende fra det tredje), og så videre.

Eksempel

Lad os finde h2, som er den 2. h2 i forælderen fra slutningen:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат:

Eksempel

Lad os finde alle lige h2 fra slutningen:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат:

Eksempel

Lad os finde alle ulige h2 fra slutningen:

html<div>
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
  
  <h2>overskrift</h2>
  <p>afsnit</p>
</div>

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

Результат: