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

Энди фарз қилайлик, биз ul рўйхатининг li тегларини қизил рангга, ol рўйхатининг li тегларини эса яшил рангга бўяшни истаймиз.

Бундай ҳолда бизга авлод селектори ёрдам беради. У тегларни уларнинг ота-онаси бўйича танлаш имконини беради. Бунинг учун ота-она селекторини, сўнг бўшлиқ ва унинг орқасидан авлод селекторини кўрсатиш керак. Бизнинг ҳолатимизда ul li селектори ul рўйхатининг ҳамма li тегларини танлайди, ol li селектори эса ol рўйхатининг ҳамма li тегларини танлайди. Келгин, уларни керакли рангларга бояйлик:

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

Авлод селектори албатта иккита тег селекторидан иборат бўлиши шарт эмас - уларнинг сони бўшлиқ билан ажратилган ҳолда исталганча бўлиши мумкин. Мисол учун, қуйидаги кодда ul теги ичида жойлашган li теги ичида ўзи жойлашган ҳамма i теглари танланади:

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>

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