Pseudoklassen nth-child
Pseudoklassen nth-child väljer ett element
som är det n:te barnet till sin förälder.
Syntax
selektor:nth-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 |
Man kan 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 (början från det andra).
Hur förstår man detta? Vi substituerar i n sekventiellt
tal från 0 och så vidare: om n = 0, då ger 2n 0 -
det finns inget sådant element (elementnumrering börjar från 1),
om n = 1, då ger 2n 2 - det andra elementet, om n = 2,
2n ger 4 - det fjärde elementet. Om man skriver 3n - det
blir var tredje element (början från det tredje), och så vidare.
|
Exempel
I detta exempel gör vi
det li som är det 4:e 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-child(4) {
color: red;
}
:
Exempel
Nu gör vi alla jämna 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-child(even) {
color: red;
}
:
Exempel
Nu gör vi alla ojämna 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-child(odd) {
color: red;
}
:
Exempel
Nu gör vi var tredje
li röd (början från den tredje):
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Exempel
I selektorn kan man ange ett intervall av element.
Anta att du har en lista med 20
element och behöver välja element från 7
till 14 inklusive. Detta kan göras
så här:
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
