Does the !important rule override media queries?

css, media-queries

Solution

Media queries and `@media` rules do not affect the behavior of `!important` in any way, because they do not have any effect on any part of the cascade. (By extension, this also means you cannot use a `@media` at-rule to "remove" an `!important` flag, even if you use a more specific selector.)

When your media query is matched, the browser sees this:

a{
    color:#0000FF!important;
}
a{
    color:#FF0000;
}

And when it doesn't, it sees this:

a{
    color:#0000FF!important;
}

Both cases result in the first ruleset taking precedence, but do not prevent, for example, an `!important` declaration with a more specific selector, or an `!important` inline style, from overriding it.

Here's another example which illustrates this better:

a{
    color:#0000FF!important;
}
@media (max-width: 300px){
    a:link,a:visited{
        color:#FF0000!important;
    }
}

When the media query is matched, the browser sees this:

a{
    color:#0000FF!important;
}
a:link,a:visited{
    color:#FF0000!important;
}

This results in the second rule taking precedence because it has a more specific selector (at least for `a` elements that match either pseudo-class). If it didn't match the media query then only the first rule would have any effect, as above.

Problem

Original source

Related problems

• What are the rules for CSS media query overlap?
• Is there a reason to use a instead of a:link or a:visited in my stylesheet?