Lapse valija CSS-is

Lapse valija > võimaldab valida elemente, mis on üksteisega otseses sisendussuhtes.

Süntaks

valija1 > valija2 {
	
}

Näide

Pöördume kõigi siltide b poole, mis asuvad otse siltide p sees, ja värvime need punaseks:

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

p > b {
	color: red;
}

Näide

Pöördume kõigi siltide b poole, mis asuvad otse klassiga .block elementide sees, ja värvime need punaseks:

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

.block > b {
	color: red;
}

Näide

Pöördume kõigi klassiga .elem elementide poole, mis asuvad otse klassiga .block elementide sees, ja värvime need punaseks:

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

.block > .elem {
	color: red;
}

Vaata ka

Kontekstivalija,
mis võimaldab valida elemendi selle vanema järgi
Naabervali,
mis võimaldab valida elemendi selle naabri järgi
Üldine õevalija,
mis võimaldab valida elemendid pärast määratud elementi
Universaalne valija,
mis võimaldab valida kõik elemendid