CSS :nth-last-child() pseudoklasse
- Vorige pagina :nth-child()
- Volgende pagina :nth-last-of-type()
- Ga een niveau omhoog CSS Pseudo-class Referentiemanual
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; }
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; }
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; }
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 |
- Vorige pagina :nth-child()
- Volgende pagina :nth-last-of-type()
- Ga een niveau omhoog CSS Pseudo-class Referentiemanual