Селектори хамсоя дар CSS

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

Синтаксис

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

Биёед ба ҳамаи тегҳои p, қарордошта пас аз тегҳои h2 муроҷиат кунем, ва онҳоро ба ранг-и сурх табдил диҳем:

<div>
	<h2>матн</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Биёед ба ҳамаи тегҳои p, қарордошта пас аз унсурҳои бо синфи .test, муроҷиат кунем ва онҳоро ба ранг-и сурх табдил диҳем:

<div>
	<p class="test">
		матн
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Биёед ба ҳамаи унсурҳои бо синфи .elem, қарордошта пас аз унсурҳои бо синфи .test, муроҷиат кунем ва онҳоро ба ранг-и сурх табдил диҳем:

<div>
	<p class="test">
		матн
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

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