Kontextuális szelektor a CSS-ben

A kontextuális szelektor, amely a (' ') parancsot jelentése, lehetővé teszi egy adott szülőbe ágyazott címkék kiválasztását

Szintaxis

szelektor1 szelektor2 {
	
}

Forduljunk minden p címkéhez a div címkén belül, és színezzük pirosra őket:

<div>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

div p {
	color: red;
}

Forduljunk minden p címkéhez a #elem azonosítójú elemen belül, és színezzük pirosra őket:

<div id="elem">
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

#elem p {
	color: red;
}

Forduljunk minden p címkéhez a .block osztállyal rendelkező elemeken belül és színezzük pirosra őket:

<div class="block">
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

.block p {
	color: red;
}

Forduljunk minden b címkéhez a p címkén belül, amelyek a div címkén belül helyezkednek el, és színezzük pirosra őket:

<div>
	<p>
		szöveg <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Gyermek szelektor,
amely lehetővé teszi az elemek közvetlen beágyazottság szerinti kiválasztását
Szomszédos testvér szelektor,
amely lehetővé teszi egy elem kiválasztását a szomszédja alapján
Általános testvér szelektor,
amely lehetővé teszi az elemek kiválasztását egy adott elem után
Univerzális szelektor,
amely lehetővé teszi az összes elem kiválasztását