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

Селектори фарзандӣ > ба элементҳо имкон медиҳад, ки ба воситаи ҷойгиршавӣ ба якдигар мустақиман интихоб шаванд.

Синтаксис

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

Намуна

Биёед ба ҳамаи тегҳои b, ки дар дохили тегҳои p мустақиман ҷойгиранд, муроҷиат кунем ва онҳоро ба рангоби сурх ранг кунем:

<p>
	матн <b>+</b>
</p>
<p>
	матн <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Намуна

Биёед ба ҳамаи тегҳои b, ки дар дохили элементҳо бо синфи .block мустақиман ҷойгиранд, муроҷиат кунем ва онҳоро ба рангоби сурх ранг кунем:

<p class="block">
	матн <b>+</b>
</p>
<p class="block">
	матн <i><b>-</b></i>
</p>
<p>
	матн <b>-</b>
</p>

.block > b {
	color: red;
}

Намуна

Биёед ба ҳамаи элементҳо бо синфи .elem, ки дар дохили элементҳо бо синфи .block мустақиман ҷойгиранд, муроҷиат кунем ва онҳоро ба рангоби сурх ранг кунем:

<p class="block">
	матн <span class="elem">+</span>
</p>
<p class="block">
	матн <i><span class="elem">-</span></i>
</p>
<p class="block">
	матн <span>-</span>
</p>
<p>
	матн <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Инчунин нигаред

Селектори контекстӣ,
ки ба элемент имкон медиҳад, ки аз рӯи волидайн интихоб шавад
Селектори ҳамсоя,
ки ба элемент имкон медиҳад, ки аз рӯи ҳамсояаш интихоб шавад
Селектори бародарӣ,
ки ба элементҳо имкон медиҳад, ки пас аз элементҳои додашуда интихоб шаванд
Селектори умумӣ,
ки ба ҳамаи элементҳо имкон медиҳад, ки интихоб шаванд