Selectorul copil în CSS

Selectorul copil > permite selectarea elementelor după încorporarea directă unul în celălalt.

Sintaxă

selector1 > selector2 {
	
}

Exemplu

Să ne adresăm tuturor tag-urilor b, care se află direct în interiorul tag-urilor p și să le colorăm în roșu:

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

p > b {
	color: red;
}

Exemplu

Să ne adresăm tuturor tag-urilor b, care se află direct în interiorul elementelor cu clasa .block și să le colorăm în roșu:

<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;
}

Exemplu

Să ne adresăm tuturor elementelor cu clasa .elem, care se află direct în interiorul elementelor cu clasa .block, și să le colorăm în roșu:

<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;
}

Vezi și

Selectorul contextual,
care permite selectarea unui element după părintele său
Selectorul adiacent,
care permite selectarea unui element după vecinul său
Selectorul de frați general,
care permite selectarea elementelor după unul dat
Selectorul universal,
care permite selectarea tuturor elementelor