CSS :nth-last-of-type() Selector
Voorbeeld
Geef een achtergrondkleur op voor elk <p>-element dat het tweede p-element is van het bovenliggende element, geteld vanaf het laatste kind:
p:nth-last-of-type(2)
{
background: red;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De selector komt overeen met elk element dat het n e kind is, van een bepaald type, van zijn ouder, geteld vanaf het laatste kind.:nth-last-of-type(n)
n kan een getal, een trefwoord of een formule zijn.
Tip: Kijk naar de :nth-last-child() selector om het element te selecteren dat het nth kind is , ongeacht het type , van zijn ouder, geteld vanaf het laatste kind.
| Versie: | CSS3 |
|---|
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de selector volledig ondersteunt.
| Selector | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-syntaxis
:nth-last-of-type(number) {
css declarations;
}
Meer voorbeelden
Voorbeeld
Oneven en even zijn trefwoorden die kunnen worden gebruikt om onderliggende elementen te matchen waarvan de index oneven of even is (de index van het eerste kind is 1).
Hier specificeren we twee verschillende achtergrondkleuren voor oneven en even p-elementen:
p:nth-last-of-type(odd)
{
background: red;
}
p:nth-last-of-type(even)
{
background: blue;
}
Voorbeeld
Een formule gebruiken ( an + b ). Beschrijving: a staat voor een cyclusgrootte, n is een teller (begint bij 0) en b is een offsetwaarde.
Hier specificeren we een achtergrondkleur voor alle p-elementen waarvan de index een veelvoud is van 3:
p:nth-last-of-type(3n+0)
{
background: red;
}