CSS-тегі бала селекторы

Бала селекторы > элементтерді бір-біріне тікелей ішкі орналасуы бойынша таңдауға мүмкіндік береді.

Синтаксис

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

Мысал

p тегтерінің ішінде тікелей орналасқан барлық b тегтеріне қарап, оларды қызыл түске бояйық:

<p>
	мәтін <b>+</b>
</p>
<p>
	мәтін <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Мысал

.block класы бар элементтердің ішінде тікелей орналасқан барлық b тегтеріне қарап, оларды қызыл түске бояйық:

<p class="block">
	мәтін <b>+</b>
</p>
<p class="block">
	мәтін <i><b>-</b></i>
</p>
<p>
	мәтін <b>-</b>
</p>

.block > b {
	color: red;
}

Мысал

.block класы бар элементтердің ішінде тікелей орналасқан .elem класы бар барлық элементтерге қарап, оларды қызыл түске бояйық:

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

Сондай-ақ қараңыз

Контекстік селектор,
ол элементті оның ата-анасы бойынша таңдауға мүмкіндік береді
Көршілес селектор,
ол элементті оның көршісі бойынша таңдауға мүмкіндік береді
Қарымдас селектор,
ол берілген элементтен кейінгі элементтерді таңдауға мүмкіндік береді
Универсалды селектор,
ол барлық элементтерді таңдауға мүмкіндік береді