Pseudoklassen nth-last-child
Pseudoklassen nth-last-child väljer
ett element som är det n:te barnet
till en förälder, räknat från slutet. Den beter sig
på samma sätt som nth-child,
förutom att räkningen sker från slutet.
Syntax
selektor:nth-last-child(tal | odd | even | uttryck) {
}
Värden
| Värde | Beskrivning |
|---|---|
| tal |
Ett positivt tal början från 1.
Anger elementets nummer som vi vill
adressera. Elementnumrering börjar från 1.
|
odd |
Ojämna element. |
even |
Jämna element. |
| uttryck |
Det går att skapa speciella uttryck med bokstaven n,
som representerar alla heltal från noll (inte från ett)
till oändligheten. Så, 2n betyder alla jämna
tal (med början från det andra).
Hur förstår man detta? Vi sätter in n sekventiellt
tal från 0 och så vidare: om n = 0, så ger 2n 0 -
det finns inget sådant element (elementnumrering börjar från 1),
om n = 1, så ger 2n 2 - det andra elementet, om n = 2,
ger 2n 4 - det fjärde elementet. Om man skriver 3n - detta
blir var tredje element (med början från det tredje), och så vidare.
|
Exempel
I detta exempel gör vi
den li som är det 4:e från slutet
barnet till sin förälder röd:
<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;
}
:
Exempel
Nu gör vi alla
jämna från slutet li röda:
<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;
}
:
Exempel
Nu gör vi alla ojämna från
slutet li röda:
<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;
}
:
Exempel
Nu gör vi var tredje
från slutet li röd:
<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;
}
:
