Giminiškųjų elementų selektorius CSS

Giminiškųjų elementų selektorius ~ leidžia pasirinkti visus elementus, esančius po nurodyto elemento toje pačioje tėvinėje elemento vietoje.

Sintaksė

selektorius1 ~ selektorius2 {
	
}

Paimkime visus p žymes, esančias po h2 žymių, ir nudažykime jas raudona spalva:

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

h2 ~ p {
	color: red;
}

Paimkime visus p žymes, esančias po elementų su klase .test, ir nudažykime jas raudona spalva:

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

.test ~ p {
	color: red;
}

Paimkime visus elementus su klase .elem, esančius po elementų su klase .test, ir nudažykime juos raudona spalva:

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

.test ~ .elem {
	color: red;
}

Dukterinis selektorius,
kuris leidžia pasirinkti elementus pagal tiesioginį įdėjimą
Kontekstinis selektorius,
kuris leidžia pasirinkti elementą pagal jo tėvinį elementą
Gretimųjų elementų selektorius,
kuris leidžia pasirinkti elementą pagal jo kaimyną
Universalusis selektorius,
kuris leidžia pasirinkti visus elementus