Детски селектор во CSS

Детскиот селектор > овозможува избирање на елементи според нивното непосредно вгнездување еден во друг.

Синтакса

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

Пример

Ајде да се обратиме до сите тагови b, кои се наоѓаат непосредно внатре во таговите p, и да ги обојиме во црвена боја:

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

p > b {
	color: red;
}

Пример

Ајде да се обратиме до сите тагови b, кои се наоѓаат непосредно внатре во елементите со класа .block, и да ги обојиме во црвена боја:

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

Пример

Ајде да се обратиме до сите елементи со класа .elem, кои се наоѓаат непосредно внатре во елементите со класа .block, и да ги обојиме во црвена боја:

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

Погледнете исто така

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