Contextuele selector in CSS

Contextuele selector, die wordt vertegenwoordigd door een spatie-commando (' '), maakt het mogelijk om tags te selecteren die genest zijn in een opgegeven ouder

Syntaxis

selector1 selector2 {
	
}

Voorbeeld

Laten we ons richten tot alle p tags binnen de div tags en ze rood kleuren:

<div>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

div p {
	color: red;
}

Voorbeeld

Laten we ons richten tot alle p tags binnen het element met #elem en ze rood kleuren:

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

#elem p {
	color: red;
}

Voorbeeld

Laten we ons richten tot alle p tags binnen elementen met de klasse .block en ze rood kleuren:

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

.block p {
	color: red;
}

Voorbeeld

Laten we ons richten tot alle b tags binnen de p tags, die zich binnen de div tags bevinden, en ze rood kleuren:

<div>
	<p>
		tekst <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Zie ook

Kindselector,
die het mogelijk maakt elementen te selecteren op directe nesteling
Aangrenzende sibling selector,
die het mogelijk maakt een element te selecteren op basis van zijn buur
Algemene sibling selector,
die het mogelijk maakt elementen na een opgegeven element te selecteren
Universele selector,
die het mogelijk maakt alle elementen te selecteren