Pseudoklasse nth-child
Pseudoklassen nth-child vælger et element,
som er det n'te barn af forælderen.
Syntaks
selektor:nth-child(tal | odd | even | udtryk) {
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| tal |
Et positivt tal startende fra 1.
Angiver nummeret på det element, vi vil
tilgå. Nummereringen af elementer starter fra 1.
|
odd |
Ulige elementer. |
even |
Lige elementer. |
| udtryk |
Man kan sammensætte specielle udtryk med bogstavet n,
som repræsenterer alle heltal fra nul (ikke fra et)
til uendelig. Så, 2n - betyder alle lige
tal (startende fra det andet).
Hvordan forstår man dette? Vi indsætter i n sekventielt
tal fra 0 og så videre: hvis n = 0, så giver 2n 0 -
det element findes ikke (nummerering af elementer starter fra 1),
hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2,
2n giver 4 - det fjerde element. Hvis man skriver 3n - det
vil være hvert tredje element (startende fra det tredje), og så videre.
|
Eksempel
I dette eksempel vil vi gøre den røde farve
på den li, som er det 4. barn af
sin forælder:
<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;
}
:
Eksempel
Nu vil vi gøre alle lige li røde:
<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;
}
:
Eksempel
Nu vil vi gøre alle ulige li røde:
<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;
}
:
Eksempel
Nu vil vi gøre hver tredje
li rød (startende fra 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;
}
:
Eksempel
I selektoren kan man angive et interval af elementer.
Lad os sige, du har en liste med 20
elementer og skal vælge elementer fra 7
til 14 inklusive. Dette kan gøres
sådan her:
<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;
}
:
