Sivuselektori CSS:ssä

Sivuselektori ~ mahdollistaa kaikkien elementtien valitsemisen, jotka sijaitsevat määritetyn elementin jälkeen saman vanhemman sisällä.

Syntaksi

valitsija1 ~ valitsija2 {
	
}

Kohdistetaan kaikkiin p-tageihin, jotka ovat h2-tagien jälkeen, ja värjätään ne punaisella:

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

h2 ~ p {
	color: red;
}

Kohdistetaan kaikkiin p-tageihin, jotka ovat luokan .test elementtien jälkeen, ja värjätään ne punaisella:

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

.test ~ p {
	color: red;
}

Kohdistetaan kaikkiin luokan .elem elementteihin, jotka ovat luokan .test elementtien jälkeen, ja värjätään ne punaisella:

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

.test ~ .elem {
	color: red;
}

Lapsiselektori,
joka mahdollistaa elementtien valitsemisen suoran sisäkkäisyyden perusteella
Jälkeläisvalitsin,
joka mahdollistaa elementin valitsemisen sen vanhemman perusteella
Vieressä oleva sivuselektori,
joka mahdollistaa elementin valitsemisen sen naapurin perusteella
Yleisvalitsin,
joka mahdollistaa kaikkien elementtien valitsemisen