Дочерний селектор дар 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>

Танҳо он тегҳои b-ро, ки фарзанди бевоситаи тегҳои li мебошанд, ба ранги сурх ранг кунед.