Kontextuell selektor i CSS

Kontextuella selektorer, som representerar kommandot mellanslag (' '), gör det möjligt att välja taggar nästlade i en given förälder

Syntax

selektor1 selektor2 {
	
}

Låt oss rikta in oss på alla p-taggar inuti div-taggar och färga dem röda:

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

div p {
	color: red;
}

Låt oss rikta in oss på alla p-taggar inuti elementet med #elem och färga dem röda:

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

#elem p {
	color: red;
}

Låt oss rikta in oss på alla p-taggar inuti element med klassen .block och färga dem röda:

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

.block p {
	color: red;
}

Låt oss rikta in oss på alla b-taggar inuti p-taggar, som finns inuti div-taggar och färga dem röda:

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

div p b {
	color: red;
}

Barnselektor,
som gör det möjligt att välja element baserat på direkt inbäddning
Intilliggande syskonselektor,
som gör det möjligt att välja ett element baserat på dess granne
Generell syskonselektor,
som gör det möjligt att välja element efter ett angivet element
Universell selektor,
som gör det möjligt att välja alla element