Kontekstuele Selekteerder in CSS

Die kontekstuele selekteerder, wat verteenwoordig word deur die spasiëring-kommando (' '), laat jou toe om etikette te kies wat binne 'n gegewe ouer-element genestel is.

Sintaksis

selekteerder1 selekteerder2 {
	
}

Voorbeeld

Kom ons rig ons tot alle p-etikette binne div-etikette en kleur hulle rooi:

<div>
	<p>
		teks
	</p>
	<p>
		teks
	</p>
</div>

div p {
	color: red;
}

Voorbeeld

Kom ons rig ons tot alle p-etikette binne die element met #elem en kleur hulle rooi:

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

#elem p {
	color: red;
}

Voorbeeld

Kom ons rig ons tot alle p-etikette binne elemente met die klas .block en kleur hulle rooi:

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

.block p {
	color: red;
}

Voorbeeld

Kom ons rig ons tot alle b-etikette binne p-etikette, wat binne div-etikette geleë is, en kleur hulle rooi:

<div>
	<p>
		teks <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Sien ook

Kindselekteerder,
wat dit moontlik maak om elemente volgens direkte nesting te kies
Aangrensende Sibling-selekteerder,
wat dit moontlik maak om 'n element volgens sy buurman te kies
Sibling-selekteerder,
wat dit moontlik maak om elemente na 'n gegewe een te kies
Universele selekteerder,
wat dit moontlik maak om alle elemente te kies