3

Why don't media queries work when element styles are defined with a different list of selectors?

For example, I have HTML page:

<div class="wrapper">
    <div class="inner">
        <div class="left">
            <div class="text">
                <span class="sample-text">test</span>
            </div>
        </div>
    </div>
</div>

And I have styles for span element:

.wrapper .inner .left .text .sample-text {
    color: red;
}

@media screen and (max-width: 800px) {
    .sample-text {
        color: green;
    }
}

As a result .sample-text isn't green when max-width is less than 800px until I use !important or the same selector:

@media screen and (max-width: 800px) {
    .wrapper .inner .left .text .sample-text {
        color: green;
    }
}

The problem is especially pronounced when using CSS-preprocessors, because it generates chains of classes like in my examples.

CodeCode123
  • 37
  • 3

1 Answers1

5

This is because of the CSS specificity rule .wrapper .inner .left .text .sample-text this class has more specificity value than .sample-text

.wrapper .inner .left .text .sample-text {
    color: red;
}

@media screen and (max-width: 800px) {
    .wrapper .inner .left .text .sample-text  {
        color: green;
    }
}

FYR check this link https://www.w3schools.com/css/css_specificity.asp

PRADEEP GORULE
  • 159
  • 1
  • 11