Dětský selektor v CSS

Dětský selektor > umožňuje vybírat prvky na základě přímého vnoření do sebe.

Syntaxe

selektor1 > selektor2 {
	
}

Příklad

Pojďme oslovit všechny tagy b, které jsou přímo uvnitř tagů p, a obarvit je na červeno:

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

p > b {
	color: red;
}

Příklad

Pojďme oslovit všechny tagy b, které jsou přímo uvnitř prvků s třídou .block, a obarvit je na červeno:

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

Příklad

Pojďme oslovit všechny prvky s třídou .elem, které jsou přímo uvnitř prvků s třídou .block, a obarvit je na červeno:

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

Viz také

Kontextový selektor,
který umožňuje vybrat prvek podle jeho rodiče
Sousedský selektor,
který umožňuje vybrat prvek podle jeho souseda
Sesterský selektor,
který umožňuje vybrat prvky po zadaném
Univerzální selektor,
který umožňuje vybrat všechny prvky