CODEWITHSUNDEEP
csscss-selectors
Stano
Stano

Reputation: 8939

Why directly defined CSS class not applies?

If I have this list:

<ul class="parent">
    <li class="child">li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

Now if I apply

.parent li {
    background-color: blue;
}
.child {
    background-color: red;
}

then the red background is ignored. Don't want to make it !important, but understand why class not work. If I change these selectors either to ul li & .child , or extend them to .parent li & .parent .child , then background applies. So maybe simple question: is there any rule, why this selector must be defined with a "full path"? Why it's not working when defined directly only with the class name ?

Upvotes: 0

Views: 54

Answers (1)

Matt Ball
Matt Ball

Reputation: 359776

The answer lies in CSS selector specificity. Short version: the most-specific selector wins.

Upvotes: 4

Related Questions