CSS :nth-last-of-type() pseudo-class

Definitie en gebruik

CSS :nth-last-of-type(n) pseudo-classes worden gebruikt om elementen te matchen die als laatste van een specifieke soort kind zijn van hun ouder-element. n van de elementen die als kind zijn van hun ouder-element.

n kan een getal/index, een keyword (oneven of even) of een formule (zoals an + b) zijn.

Tip:Bekijk :nth-last-child() pseudo-classes worden gebruikt om elementen te selecteren die als de laatste van een specifieke soort kind zijn van hun ouder-element. n van de elementen, ongeacht hun type.

Voorbeeld

Voorbeeld 1

Wijzen we de achtergrondkleur toe aan de <p>-elementen die de tweede laatste kind zijn van hun ouder-element.

Daarnaast wijzen we de achtergrondkleur toe aan de <li>-elementen die de derde laatste kind zijn van hun ouder-element:

p:nth-last-of-type(2) {
  achtergrond: rood;
}
li:nth-last-of-type(3) {
achtergrond: geel;
}

Probeer het zelf

Voorbeeld 2

oneven en even is een keyword dat kan worden gebruikt om elementen te matchen met een even of oneven index (de index van het eerste kind is 1).

Hier wijzen we de achtergrondkleur toe aan de <p>-elementen met een even of oneven index:

p:nth-last-of-type(oneven) {
  achtergrond: rood;
}
p:nth-last-of-type(even) {
  achtergrond: blauw;
}

Probeer het zelf

Voorbeeld 3

Met de formule (an + b). Beschrijving: a staat voor de gehele som, n is alle niet-negatieve gehele getallen die beginnen bij 0, en b is de gehele som.

Hier wijzen we de achtergrondkleur toe aan alle <p> en <li>-elementen met een index die een veelvoud van 3 is:

p:nth-last-of-type(3n) {
  achtergrond: rood;
}
li:nth-last-of-type(3n) {
  achtergrond: geel;
}

Probeer het zelf

CSS syntaxis

:nth-last-of-type(index | oneven | even | an+b) {
  css declaraties;
}

Technische details

Browserondersteuning

De cijfers in de tabel specificeren de eerste browserversie die deze pseudo-klasse volledig ondersteunt.