Descendant Selector Priority in CSS
In all previous lessons, all selectors had to catch the element itself. It may be that one selector catches an element, and the second selector catches the parent of this element.
You already know that if a parent is given, for example, a color, then this color will be inherited by the child. But if the child is also given a color, then the child's selector will have a higher priority than the parent's selector.
This means that the descendant tag selector wins over the parent class:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* this color will be applied */
}
:
The child tag selector also defeats the parent ID:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* this color will be applied */
}
:
