Specificiteit van descendant selectors in CSS
In alle vorige lessen moesten alle selectors het element zelf vangen. Het kan zijn dat de ene selector een element vangt, en de tweede selector de ouder van dat element vangt.
Je weet al dat als een ouder bijvoorbeeld een kleur krijgt toegewezen, deze kleur wordt geërfd door de descendant. Maar als de descendant ook een kleur krijgt toegewezen, dan heeft de selector van de descendant een hogere specificiteit dan de selector van de ouder.
Dit betekent dat een tag-selector van een descendant een class-selector van de ouder verslaat:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* deze kleur wordt toegepast */
}
:
Een tag-selector van een descendant verslaat ook een ID-selector van de ouder:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* deze kleur wordt toegepast */
}
:
