Podradený selektor v CSS

Podradený selektor > umožňuje vyberať elementy na základe priameho vnorenia jeden do druhého.

Syntax

selektor1 > selektor2 {
	
}

Príklad

Obráťme sa na všetky elementy b, ktoré sú priamo vnorené do elementov p a zafarbíme ich na červeno:

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

p > b {
	color: red;
}

Príklad

Obráťme sa na všetky elementy b, ktoré sú priamo vnorené do elementov s triedou .block a zafarbíme ich 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;
}

Príklad

Obráťme sa na všetky elementy s triedou .elem, ktoré sú priamo vnorené do elementov s triedou .block, a zafarbíme ich 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;
}

Pozri tiež

Kontextový selektor,
ktorý umožňuje vybrať element podľa jeho rodiča
Susediaci selektor,
ktorý umožňuje vybrať element podľa jeho suseda
Súrodencovský selektor,
ktorý umožňuje vybrať elementy za daným elementom
Univerzálny selektor,
ktorý umožňuje vybrať všetky elementy