Adjacent Selector in CSS

Der Adjacent Selector + ermöglicht es, ein Element basierend auf seinem direkt vorangehenden Nachbarelement auszuwählen.

Syntax

selector1 + selector2 {
	
}

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

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

h2 + p {
	color: red;
}

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

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

.test + p {
	color: red;
}

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

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

.test + .elem {
	color: red;
}

Kindselektor,
der die Auswahl von Elementen basierend auf direkter Verschachtelung ermöglicht
Nachfahrenselektor,
der die Auswahl eines Elements basierend auf seinem Elternelement ermöglicht
Geschwisterselektor,
der die Auswahl von Elementen nach einem bestimmten Element ermöglicht
Universalselektor,
der die Auswahl aller Elemente ermöglicht