Der Geschwisterselektor in CSS

Der Geschwisterselektor ~ erlaubt es, alle Elemente auszuwählen, die sich nach einem bestimmten Element innerhalb desselben Elternelements befinden.

Syntax

selektor1 ~ selektor2 {
	
}

Beispiel

Wenden wir uns allen p-Tags zu, die sich nach h2-Tags befinden, und färben sie rot ein:

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

h2 ~ p {
	color: red;
}

Beispiel

Wenden wir uns allen p-Tags zu, die sich nach Elementen mit der Klasse .test befinden, und färben sie rot ein:

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

.test ~ p {
	color: red;
}

Beispiel

Wenden wir uns allen Elementen mit der Klasse .elem zu, die sich nach Elementen mit der Klasse .test befinden, und färben sie rot ein:

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

.test ~ .elem {
	color: red;
}

Siehe auch

Der Kindselektor,
der es erlaubt, Elemente nach direkter Verschachtelung auszuwählen
Der Nachfahrenselektor,
der es erlaubt, ein Element nach seinem Elternelement auszuwählen
Der benachbarte Geschwisterselektor,
der es erlaubt, ein Element nach seinem Nachbarelement auszuwählen
Der Universalselektor,
der es erlaubt, alle Elemente auszuwählen