nth-child-pseudoluokka
nth-child-pseudoluokka valitsee elementin,
joka on vanhempansa n:s lapsi.
Syntaksi
valitsija:nth-child(luku | odd | even | lauseke) {
}
Arvot
| Arvo | Kuvaus |
|---|---|
| luku |
Positiivinen luku alkaen 1.
Määrittää elementin järjestysnumeron, johon haluamme
kohdistaa tyylit. Elementtien numerointi alkaa 1.
|
odd |
Parittomat elementit. |
even |
Parilliset elementit. |
| lauseke |
Voi muodostaa erikoislausekkeita kirjaimella n,
joka edustaa kaikkia kokonaislukuja nollasta (ei ykkösestä)
äärettömään. Näin ollen 2n tarkoittaa kaikkia parillisia
lukuja (alkaen toisesta).
Kuinka tämä ymmärretään? Korvaamme n:ään peräkkäin
luvut alkaen 0 ja niin edelleen: jos n = 0, niin 2n antaa 0 -
tällaista elementtiä ei ole (elementtien numerointi alkaa 1:stä),
jos n = 1, niin 2n antaa 2 - toinen elementti, jos n = 2,
2n antaa 4 - neljäs elementti. Jos kirjoitat 3n - tämä
on joka kolmas elementti (alkaen kolmannesta), ja niin edelleen.
|
Esimerkki
Tässä esimerkissä teemme punaiseksi
sen li-elementin, joka on vanhempansa 4.s lapsi:
<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;
}
:
Esimerkki
Nyt teemme punaisiksi kaikki parilliset li-elementit:
<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;
}
:
Esimerkki
Nyt teemme punaisiksi kaikki parittomat li-elementit:
<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;
}
:
Esimerkki
Nyt teemme punaisiksi joka kolmannen
li-elementin (alkaen kolmannesta):
<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;
}
:
Esimerkki
Valitsijassa voidaan määrittää elementtialue.
Oletetaan, että sinulla on lista, jossa on 20
elementtiä ja sinun on valittava elementit 7
- 14 mukaan lukien. Tämä voidaan tehdä
näin:
<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;
}
:
