Testvér szelektor CSS-ben

A testvér szelektor ~ lehetővé teszi az összes elem kiválasztását, amelyek a megadott elem után találhatók ugyanabban a szülőben.

Szintaxis

szelektor1 ~ szelektor2 {
	
}

Forduljunk minden p taghez, amelyek a h2 tagok után találhatók, és színezzük pirosra:

<div>
	<h2>szöveg</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Forduljunk minden p taghez, amelyek a .test osztályú elemek után találhatók, és színezzük pirosra:

<div>
	<p class="test">
		szöveg
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Forduljunk minden .elem osztályú elemhez, amelyek a .test osztályú elemek után találhatók, és színezzük pirosra:

<div>
	<p class="test">
		szöveg
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Gyermek szelektor,
amely lehetővé teszi az elemek kiválasztását közvetlen leszármazás alapján
Kontextuális szelektor,
amely lehetővé teszi egy elem kiválasztását szülője alapján
Szomszédos testvér szelektor,
amely lehetővé teszi egy elem kiválasztását szomszédja alapján
Univerzális szelektor,
amely lehetővé teszi az összes elem kiválasztását