Pseudoklasse nth-last-of-type

De pseudoklasse nth-last-of-type selecteert een element dat het n-de kind is van het opgegeven type van de ouder, tellend vanaf het einde. Gedraagt zich vergelijkbaar met nth-of-type, maar de telling begint vanaf het einde.

Syntaxis

cssselector:nth-last-of-type(getal | odd | even | expressie) {
  
}

Waarden

Waarde	Beschrijving
getal	Een positief getal vanaf `1`. Specificeert het nummer van het element dat we willen selecteren. De nummering van elementen begint bij `1`.
`odd`	Oneven elementen.
`even`	Even elementen.
expressie	Speciale expressies kunnen worden samengesteld met de letter n, die alle gehele getallen van nul (niet van één) tot oneindig vertegenwoordigt. Dus, `2n` betekent alle even getallen (te beginnen bij de tweede). Hoe is dit te begrijpen? Vervang `n` opeenvolgend door getallen vanaf `0` en zo verder: als n = 0, dan geeft 2n 0 - zo'n element bestaat niet (nummering van elementen begint bij 1), als n = 1, dan geeft 2n 2 - het tweede element, als n = 2, geeft 2n 4 - het vierde element. Als je 3n schrijft - is dat elke derde element (te beginnen bij de derde), enzovoort.

Voorbeeld

Laten we de h2 vinden die de 2-de h2 is in de ouder, tellend vanaf het einde:

html<div>
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
</div>

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

Результат:

Voorbeeld

Laten we alle even h2's vanaf het einde vinden:

html<div>
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
</div>

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

Результат:

Voorbeeld

Laten we alle oneven h2's vanaf het einde vinden:

html<div>
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
  
  <h2>titel</h2>
  <p>paragraaf</p>
</div>

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

Результат: