Kontextselektor in CSS

Der Kontextselektor, dargestellt durch das Leerzeichen (' '), erlaubt es, Tags auszuwählen, die in einem bestimmten Elternelement verschachtelt sind

Syntax

Selektor1 Selektor2 {
	
}

Beispiel

Wenden wir uns allen p-Tags innerhalb von div-Tags zu und färben sie rot:

<div>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

div p {
	color: red;
}

Beispiel

Wenden wir uns allen p-Tags innerhalb des Elements mit #elem zu und färben sie rot:

<div id="elem">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

#elem p {
	color: red;
}

Beispiel

Wenden wir uns allen p-Tags innerhalb von Elementen mit der Klasse .block zu und färben sie rot:

<div class="block">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

.block p {
	color: red;
}

Beispiel

Wenden wir uns allen b-Tags innerhalb von p-Tags, die sich innerhalb von div-Tags befinden, zu und färben sie rot:

<div>
	<p>
		text <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Siehe auch

Kindselektor,
der es erlaubt, Elemente nach direkter Verschachtelung auszuwählen
Angrenzender Geschwisterselektor,
der es erlaubt, ein Element nach seinem Nachbarn auszuwählen
Geschwisterselektor,
der es erlaubt, Elemente nach einem bestimmten Element auszuwählen
Universalselektor,
der es erlaubt, alle Elemente auszuwählen