CSSдаги қариндош селектори

Қариндош селектори ~ бир ота-она ичида берилган элементдан кейин жойлашган барча элементларни танлаш имконини беради.

Синтаксис

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

Келинг, h2 тегларидан кейин жойлашган барча p тегларига мурожаат қилиб, уларни қизил рангга бояйлик:

<div>
	<h2>text</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Келинг, .test синфига эга элементлардан кейин жойлашган барча p тегларига мурожаат қилиб, уларни қизил рангга бояйлик:

<div>
	<p class="test">
		text
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Келинг, .test синфига эга элементлардан кейин жойлашган барча .elem синфига эга элементларга мурожаат қилиб, уларни қизил рангга бояйлик:

<div>
	<p class="test">
		text
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Фарзанд селектори,
у элементларни бевосита ичкилик буйича танлаш имконини беради
Контекстли селектор,
у элементни унинг ота-онаси буйича танлаш имконини беради
Қўшни селектор,
у элементни унинг қўшниси буйича танлаш имконини беради
Универсал селектор,
у барча элементларни танлаш имконини беради