Beginnersfout in descendant selector

Bekijk de volgende selector:

p.eee {
	color: red;
}

Je zou al moeten weten dat zo'n selector paragrafen met de klasse eee selecteert. Bijvoorbeeld deze:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Bekijk nu deze selector:

p .eee {
	color: green;
}

Deze selector verschilt van de vorige doordat er tussen de tag naam en de klasse naam een spatie staat. Deze spatie vertegenwoordigt de descendant selector. Dat betekent in dit geval dat we alle elementen met de klasse eee selecteren, die zich binnen paragrafen bevinden. Deze selector selecteert bijvoorbeeld de volgende spans:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Resultaat van de code:

Dus, nogmaals: p.eee - zo'n selector selecteert paragrafen met de klasse eee. Maar als ik dit doe: p .eee, dan selecteer ik alle elementen met de klasse eee, die zich binnen paragrafen bevinden. Voel dit verschil.

Vertel wat de selector selecteert in de onderstaande code. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:

p.bbb {
	color: red;
}

Vertel wat de selector selecteert in de onderstaande code. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:

p .bbb {
	color: red;
}

Vertel wat de selector selecteert in de onderstaande code. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:

.eee p.bbb {
	color: red;
}

Vertel wat de selector selecteert in de onderstaande code. Schrijf vervolgens de HTML code die bij deze selector past. Hier is de code met de selector:

.eee p .bbb {
	color: red;
}