CSSдаги фарзанд селектори

Фарзанд селектори > элементларнинг бир-бирига бевосита ички киришганлиги буйича танлаш имконини беради.

Синтаксис

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

Мисол

Келинг, p тегларининг ичидаги бевосита жойлашган барча b тегларига mуроожат килиб, уларни қизил рангга бояйлик:

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

p > b {
	color: red;
}

Мисол

Келинг, .block синовига эга элементларнинг ичидаги бевосита жойлашган барча b тегларига mуроожат килиб, уларни қизил рангга бояйлик:

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

Мисол

Келинг, .block синовига эга элементларнинг ичидаги бевосита жойлашган барча .elem синовига эга элементларга mуроожат килиб, уларни қизил рангга бояйлик:

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

Шунингдек қаранг

Контекстли селектор,
у элементни унинг ота-онаси буйича танлаш имконини беради
Қўшни селектор,
у элементни унинг қўшниси буйича танлаш имконини беради
Қарндаш селектор,
у берилган элементдан кейинги элементларни танлаш имконини беради
Универсал селектор,
у барча элементларни танлаш имконини беради