Pseudoklassen nth-last-of-type

Pseudoklassen nth-last-of-type väljer ett element som är det n:te barnet av en angiven typ, räknat från slutet. Den fungerar på samma sätt som nth-of-type, men räknar från slutet.

Syntax

cssselector:nth-last-of-type(tal | odd | even | uttryck) {
  
}

Värden

Värde	Beskrivning
tal	Ett positivt tal början från `1`. Anger elementets nummer som vi vill rikta in oss på. Elementnumrering börjar från `1`.
`odd`	Ojämna element.
`even`	Jämna element.
uttryck	Man kan skapa speciella uttryck med bokstaven n, som representerar alla heltal från noll (inte från ett) till oändligheten. Så, `2n` betyder alla jämna nummer (med början från det andra). Hur förstår man detta? Vi ersätter `n` sekventiellt med tal från `0` och så vidare: om n = 0, då ger 2n 0 - det finns inget sådant element (elementnumrering börjar från 1), om n = 1, då ger 2n 2 - det andra elementet, om n = 2, ger 2n 4 - det fjärde elementet. Om man skriver 3n - blir det var tredje element (med början från det tredje), och så vidare.

Exempel

Låt oss hitta h2 som är det 2:a h2 i föräldern från slutet:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

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

Результат:

Exempel

Låt oss hitta alla jämna h2 från slutet:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

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

Результат:

Exempel

Låt oss hitta alla ojämna h2 från slutet:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

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

Результат: