Pseudo-klassen nth-child
Pseudo-klassen nth-child velger et element,
som er det n-te barnet til forelderen.
Syntaks
velger:nth-child(tall | odd | even | uttrykk) {
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| tall |
Et positivt tall starter fra 1.
Angir nummeret på elementet vi ønsker å
adressere. Nummereringen av elementer starter fra 1.
|
odd |
Odde elementer. |
even |
Partall elementer. |
| uttrykk |
Man kan sette sammen spesielle uttrykk med bokstaven n,
som representerer alle heltall fra null (ikke fra en)
til uendelig. Så, 2n betyr alle partall
(med start fra det andre).
Hvordan forstå dette? Vi setter inn i n sekvensielt
tall fra 0 og så videre: hvis n = 0, gir 2n 0 -
det finnes ikke noe slikt element (elementnummerering starter fra 1),
hvis n = 1, gir 2n 2 - det andre elementet, hvis n = 2,
gir 2n 4 - det fjerde elementet. Hvis man skriver 3n - vil dette
være hvert tredje element (med start fra det tredje), og så videre.
|
Eksempel
I dette eksempelet vil vi gjøre rød farge
på den li som er det 4-te barnet
til sin forelder:
<ul>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Eksempel
Nå vil vi gjøre alle partall li røde:
<ul>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Eksempel
Nå vil vi gjøre alle odde li røde:
<ul>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Eksempel
Nå vil vi gjøre hver tredje
li rød (med start fra den tredje):
<ul>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Eksempel
I velgeren kan man spesifisere et område av elementer.
Anta at du har en liste med 20
elementer og må velge elementer fra 7
til 14 inklusive. Dette kan gjøres
slik:
<ol>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
<li>listeelement</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
