CSS :nth-last-child() pseudoklasse

Definitie en gebruik

CSS :nth-last-child(n) De pseudoklasse wordt gebruikt om elk element te matchen dat de n-de afgeleide zoon is van zijn ouder-element, ongeacht zijn type.

n kan een getal/index zijn, een sleutelwoord (ones of even) of een formule (zoals an + b)

Tip:Bekijk :nth-last-of-type() De pseudoklasse selecteert elke element die de n-de afgeleide zoon is van zijn ouder-element, ongeacht zijn type. n van de elementen die een afgeleide zoon zijn.

Voorbeeld

Voorbeeld 1

Geef de achtergrondkleur aan de <p>-elementen die de tweede afgeleide zoon zijn van hun ouder-element:

p:nth-last-child(2) {
  background-color: rood;
}

Probeer het zelf

Voorbeeld 2

ones en even is een sleutelwoord dat kan worden gebruikt om elementen met een even of oneven index te matchen.

Hierin geven we de achtergrondkleur aan de <p>-elementen met een even of oneven index:

p:nth-last-child(ones) {
  background-color: rood;
}
p:nth-last-child(heelgetal) {
  background-color: blauw;
}

Probeer het zelf

Voorbeeld 3

Gebruik de formule (an + b) Beschrijving:a Vertegenwoordigt een geheel getalstap, n zijn alle niet-negatieve geheel getallen die beginnen bij 0,b is een geheel getalafstand.

Hierin geven we de achtergrondkleur aan alle <p>-elementen met een index die een drievoud is van 3:

p:nth-last-child(3n+0) {
  background-color: rood;
}

Probeer het zelf

CSS syntaxis

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

Technische details

Versie: CSS3

Browserondersteuning

De cijfers in de tabel specificeren de eerste browserversie die deze pseudoklasse volledig ondersteunt.

Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 9.6