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

Фарз қилайлик, бизда куйидаги код бор:

<p>
	матн <b><i>қалин курсив</i></b>
</p>
<p>
	матн <i>фақат курсив</i>
</p>

Фарз қилайлик, биз абзацларнинг насли бўлган i тегларини танламокчимиз. Буни бажарамиз:

p i {
	color: red;
}

Кодни ишга тушириш натижаси:

Келинг энди биз абзацларимизга бевосита фарзанд бўлган i тегларини танлаймиз. Буда фарзанд селектори > бизга ёрдам беради.

Ундан қандай фойдаланишни тушуниш учун уни насл селектори билан солиштирайлик. Мана бу: p i - биз абзацлар ичидаги барча курсивларни танлаймиз, аммо мана бу: p > i - фақат абзацларга бевосита фарзанд бўлган курсивларни танлайди.

Келинг бу селекторни бизнинг HTML кодимизга тадбиқ этайлик:

p > i {
	color: red;
}

Кодни ишга тушириш натижаси:

Куйидаги код берилган:

<ul>
	<li>
		<i>курсив</i>
		<b>қалин</b>
		<b><i>қалин курсив</i></b>
	</li>
	<li>
		<i>курсив</i>
		<b>қалин</b>
		<b><i>қалин курсив</i></b>
	</li>
</ul>

Фақат li тегларига бевосита фарзанд бўлган b тегларинигина қизил рангга боянг.