Селектори фарзандҳо дар CSS

Фарз мекунем, ки мо рӯйхати ul ва рӯйхати ol дорем:

<ul>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ul>
<ol>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ol>

Биёед тегҳои li-ро дар ин рӯйхатҳо ба ранги сурх ранг кунем:

li {
	color: red;
}

Акнун фарз мекунем, ки мо мехоҳем тегҳои li рӯйхати ul-ро ба ранги сурх ранг кунем, ва тегҳои li рӯйхати ol-ро ба ранги сабз.

Дар ин ҳолат ба мо селектори фарзандҳо кӯмак мекунад. Он имкон медиҳад тегҳоро тавассути волидайнҳои онҳо интихоб кунем. Барои ин лозим аст селектори волидайнро нишон диҳем, ва баъд аз як фосила - селектори фарзандро. Дар ҳолати мо селектори ul li ҳамаи тегҳои li-ро аз рӯйхати ul интихоб мекунад, ва селектори ol li - ҳамаи тегҳои li-ро аз рӯйхати ol интихоб мекунад. Биёед онҳоро ба рангҳои зарурӣ ранг кунем:

ul li {
	color: red;
}
ol li {
	color: green;
}

Селектори фарзандҳо ҳатман бояд аз ду селектори тег иборат бошад - онҳо метавонанд ҳар қадар, ки бо фосила навишта шудаанд, бошанд. Дар рамзи зерин, масалан, ҳамаи тегҳои i интихоб мешаванд, ки дар дохили теги li ҷойгиранд, ки онҳо худ дар дохили теги ul ҷойгиранд:

ul li i {
	color: red;
}

Рамзи зерин дода шудааст:

<ul>
	<li>матн <i>курсивӣ</i></li>
	<li>матн <i>курсивӣ</i></li>
	<li>матн <i>курсивӣ</i></li>
	<li>матн <i>курсивӣ</i></li>
</ul>

<p>
	матни параграф <i>курсивӣ</i>
</p>
<p>
	матни параграф <i>курсивӣ</i>
</p>

Курсивро аз тегҳои ul ба ранги сурх ранг кунед, ва курсивро аз тегҳои p ба ранги сабз.

Рамзи зерин дода шудааст:

<p>
	матни параграф <b><i>курсивӣи ғализ</i></b>
</p>
<p>
	матни параграф <i>курсивӣ</i>
</p>

Курсивро, ки дар дохили теги b ҷойгир аст, ки худ дар дохили теги p ҷойгир аст, ба ранги сурх ранг кунед.