Даччыны селектар у 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;
}

Глядзіце таксама

Кантэкстны селектар,
які дазваляе выбраць элемент па яго бацьку
Суседні селектар,
які дазваляе выбраць элемент па яго суседу
Сяброўскі селектар,
які дазваляе выбраць элементы пасля зададзенага
Універсальны селектар,
які дазваляе выбраць усе элементы