CODEWITHSUNDEEP
csscss-selectorsmedia-queries
Depak Chopra
Depak Chopra

Reputation: 317

Do media queries affect precedence in CSS? Or why is this happening?

I was just looking at Inspect Element on one of my nested unordered lists and I noticed that one of my selectors with 2 ids is being ranked lower than the selector for a mere list element li. Does this have something to do with the media query that encloses the selector with 2 ids? Or why is this?

enter image description here

Upvotes: 2

Views: 141

Answers (1)

Matthew Green
Matthew Green

Reputation: 10401

What you are seeing is not due to media queries but due to how inheritance is handled in CSS. Take the example below:

#super #specific {
    color: blue;
}
p {
    color: orange;
}
<div id="super">
    <div id="specific">
        <p>Paragraph text</p>
        <div>Div text</div>
    </div>
</div>

Even though you have a style that has a specificity value of 0200, the value of 0001 seemingly overrides it. From what I can tell the reason is due to how CSS calculates the specified value.

According to the spec, it first goes through the cascade to determine any values. If no values found then it will see if anything is inherited. Last it will use any default value for that element. Since the blue color in my example was passed to its inner elements through inheritance, that means that any CSS value applied to the inner elements would override that. It's also why the use of the inherit value in CSS is so important because it allows you to set inheritance as part of the cascade making sure those values take the correct precedence instead of just allowing it to default to it.

Upvotes: 1

Related Questions