Pseudo-klas nth-child
Die pseudo-klas nth-child kies 'n element
wat die n-de nakomeling van sy ouer is.
Sintaksis
selektor:nth-child(getal | odd | even | uitdrukking) {
}
Waardes
| Waarde | Beskrywing |
|---|---|
| getal |
'n Positiewe getal vanaf 1.
Spesifiseer die nommer van die element waarna ons wil
verwijs. Die nummering van elemente begin by 1.
|
odd |
Onewe elemente. |
even |
Ewe elemente. |
| uitdrukking |
Jy kan spesiale uitdrukkings saamstel met die letter n,
wat alle heelgetalle van nul (nie een nie)
tot oneindig verteenwoordig. Dus, 2n - beteken alle ewe
getalle (begin by die tweede).
Hoe om dit te verstaan? Vervang n opeenvolgend
met getalle van 0 en so aan: as n = 0, dan gee 2n 0 -
daar is geen so 'n element nie (elemente word van 1 af genommer),
as n = 1, dan gee 2n 2 - die tweede element, as n = 2,
gee 2n 4 - die vierde element. As jy 3n skryf - dit
sal elke derde element wees (begin by die derde), en so aan.
|
Voorbeeld
In hierdie voorbeeld sal ons die
li wat die 4-de nakomeling van
sy ouer is, rooi maak:
<ul>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Voorbeeld
Nou sal ons al die ewe li rooi maak:
<ul>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Voorbeeld
Nou sal ons al die onewe li rooi maak:
<ul>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Voorbeeld
Nou sal ons elke derde
li rooi maak (begin by die derde):
<ul>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
</ul>
li:nth-child(3n) {
color: red;
}
:
Voorbeeld
Jy kan 'n reeks elemente in die selektor spesifiseer.
Gestel jy het 'n lys van 20
elemente en jy moet elemente 7
tot 14 insluitend kies. Dit kan gedoen word
soos volg:
<ol>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
<li>lys item</li>
</ol>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
