CSSda qarindosh selektor

Qarindosh selektor ~ bir xil ota-ichida berilgan elementdan keyin joylashgan barcha elementlarni tanlash imkonini beradi.

Sintaksis

selektor1 ~ selektor2 {
	
}

Misol

Keling, h2 teglaridan keyin joylashgan barcha p teglariga murojaat qilaylik va ularni qizil rangga bo'yaylik:

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

h2 ~ p {
	color: red;
}

Misol

Keling, .test klassiga ega bo'lgan elementlardan keyin joylashgan barcha p teglariga murojaat qilaylik va ularni qizil rangga bo'yaylik:

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

.test ~ p {
	color: red;
}

Misol

Keling, .test klassiga ega bo'lgan elementlardan keyin joylashgan barcha .elem klassiga ega elementlarga murojaat qilaylik va ularni qizil rangga bo'yaylik:

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

.test ~ .elem {
	color: red;
}

Shuningdek qarang

Farzand selektor,
elementlarni bevosita vorislik bo'yicha tanlash imkonini beradi
Kontekst selektor,
elementni uning ota-onasi bo'yicha tanlash imkonini beradi
Qo'shni selektor,
elementni uning qo'shnisi bo'yicha tanlash imkonini beradi
Universal selektor,
barcha elementlarni tanlash imkonini beradi