Algemene broer of zus selector in CSS

De algemene broer of zus selector ~ maakt het mogelijk om alle elementen te selecteren die na het opgegeven element binnen dezelfde ouder staan.

Syntaxis

selector1 ~ selector2 {
	
}

Laten we ons richten tot alle p-tags, die na de h2-tags staan, en ze rood kleuren:

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

h2 ~ p {
	color: red;
}

Laten we ons richten tot alle p-tags, die na elementen met de klasse .test staan, en ze rood kleuren:

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

.test ~ p {
	color: red;
}

Laten we ons richten tot alle elementen met de klasse .elem, die na elementen met de klasse .test staan, en ze rood kleuren:

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

.test ~ .elem {
	color: red;
}

Kindselector,
die het mogelijk maakt elementen te selecteren op directe genestheid
Afstammingsselector,
die het mogelijk maakt een element te selecteren op basis van zijn ouder
Aangrenzende broer of zus selector,
die het mogelijk maakt een element te selecteren op basis van zijn buur
Universele selector,
die het mogelijk maakt alle elementen te selecteren