Дъщерен селектор в 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;
}

Вижте също

Контекстен селектор,
който позволява избор на елемент по неговия родител
Съседен селектор,
който позволява избор на елемент по неговия съсед
Сестрински селектор,
който позволява избор на елементи след зададен
Универсален селектор,
който позволява избор на всички елементи