Lasten valitsin CSS:ssä

Lasten valitsin > mahdollistaa elementtien valitsemisen suoran sisäkkäisyyden perusteella.

Syntaksi

valitsin1 > valitsin2 {
	
}

Esimerkki

Käytetään kaikkiin b-tageihin, jotka ovat suoraan p-tagien sisällä, ja värjätään ne punaiseksi:

<p>
	teksti <b>+</b>
</p>
<p>
	teksti <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Esimerkki

Käytetään kaikkiin b-tageihin, jotka ovat suoraan elementtien luokalla .block sisällä, ja värjätään ne punaiseksi:

<p class="block">
	teksti <b>+</b>
</p>
<p class="block">
	teksti <i><b>-</b></i>
</p>
<p>
	teksti <b>-</b>
</p>

.block > b {
	color: red;
}

Esimerkki

Käytetään kaikkiin elementteihin luokalla .elem, jotka ovat suoraan elementtien luokalla .block sisällä, ja värjätään ne punaiseksi:

<p class="block">
	teksti <span class="elem">+</span>
</p>
<p class="block">
	teksti <i><span class="elem">-</span></i>
</p>
<p class="block">
	teksti <span>-</span>
</p>
<p>
	teksti <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Katso myös

Kontekstivalitsin,
joka mahdollistaa elementin valitsemisen sen vanhemman perusteella
Vierekkäinen valitsin,
joka mahdollistaa elementin valitsemisen sen naapurin perusteella
Sisarusvalitsin,
joka mahdollistaa elementtien valitsemisen annetun jälkeen
Universaalivalitsin,
joka mahdollistaa kaikkien elementtien valitsemisen