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
selector: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:
<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>
h2:nth-last-of-type(2) {
color: red;
}
:
Voorbeeld
Laten we alle even h2's vanaf het einde vinden:
<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>
h2:nth-last-of-type(even) {
color: red;
}
:
Voorbeeld
Laten we alle oneven h2's vanaf het einde vinden:
<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>
h2:nth-last-of-type(odd) {
color: red;
}
:
