Децки селектор у CSS-у

Децки селектор > омогућава одабир елемената на основу директног улагања једних у друге.

Синтакса

селектор1 > селектор2 {
	
}

Пример

Хајде да се обратимо свим таговима b који се директно налазе унутар тагова p, и да их обојимо у црвену боју:

<p>
	текст <b>+</b>
</p>
<p>
	текст <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Пример

Хајде да се обратимо свим таговима b који се директно налазе унутар елемената са класом .block, и да их обојимо у црвену боју:

<p class="block">
	текст <b>+</b>
</p>
<p class="block">
	текст <i><b>-</b></i>
</p>
<p>
	текст <b>-</b>
</p>

.block > b {
	color: red;
}

Пример

Хајде да се обратимо свим елементима са класом .elem, који се директно налазе унутар елемената са класом .block, и да их обојимо у црвену боју:

<p class="block">
	текст <span class="elem">+</span>
</p>
<p class="block">
	текст <i><span class="elem">-</span></i>
</p>
<p class="block">
	текст <span>-</span>
</p>
<p>
	текст <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Види још

Контекстуални селектор,
који омогућава одабир елемента на основу његовог родитеља
Суседни селектор,
који омогућава одабир елемента на основу његовог суседа
Сестрински селектор,
који омогућава одабир елемената након задатог
Универзални селектор,
који омогућава одабир свих елемената