Selektor kontekstowy w CSS

Selektor kontekstowy, reprezentowany przez spację (' '), umożliwia wybieranie tagów zagnieżdżonych w określonym rodzicu

Składnia

selektor1 selektor2 {
	
}

Odnówmy się do wszystkich tagów p wewnątrz tagów div i pokolorujmy je na czerwono:

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

div p {
	color: red;
}

Odnówmy się do wszystkich tagów p wewnątrz elementu z #elem i pokolorujmy je na czerwono:

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

#elem p {
	color: red;
}

Odnówmy się do wszystkich tagów p wewnątrz elementów z klasą .block i pokolorujmy je na czerwono:

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

.block p {
	color: red;
}

Odnówmy się do wszystkich tagów b wewnątrz tagów p, znajdujących się wewnątrz tagów div i pokolorujmy je na czerwono:

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

div p b {
	color: red;
}

Selektor potomka bezpośredniego,
który umożliwia wybieranie elementów według bezpośredniego zagnieżdżenia
Selektor brata bezpośredniego,
który umożliwia wybieranie elementu na podstawie jego bezpośredniego sąsiada
Selektor braci,
który umożliwia wybieranie elementów po określonym
Selektor uniwersalny,
który umożliwia wybieranie wszystkich elementów