Pseudoklasse nth-last-child
De pseudoklasse nth-last-child selecteert
een element dat het n-de kind van de ouder is,
tellend vanaf het einde. Gedraagt zich
vergelijkbaar met nth-child,
alleen wordt de telling vanaf het einde uitgevoerd.
Syntaxis
selector:nth-last-child(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 |
Er kunnen speciale expressies 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? We vervangen in n opeenvolgend
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 we 3n schrijven - is dit
elk derde element (te beginnen bij de derde), enzovoort.
|
Voorbeeld
In dit voorbeeld maken we de kleur rood
voor die li, die het 4-de vanaf het einde
kind van zijn ouder is:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(4) {
color: red;
}
:
Voorbeeld
Nu maken we alle
even li vanaf het einde rood:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(even) {
color: red;
}
:
Voorbeeld
Nu maken we alle oneven
li vanaf het einde rood:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(odd) {
color: red;
}
:
Voorbeeld
Nu maken we elke derde
li vanaf het einde rood:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-last-child(3n) {
color: red;
}
:
