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;
}