Does the !important rule override media queries?

Question

So for instance, if I had a media query and also some regular CSS with the !important rule on stuff, would it be affected?

For example:

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

Answer 1

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.

Answer 2

Yes. Typically if you need to use !important, something can be improved in your code. Here, you can see that it is overriding the media queries' change: JS Fiddle

If you remove !important form the code, the media query works as designed: JS Fiddle working properly

---

Recommended reading on when to use !important:
When Using !important is The Right Choice

Answer 3

Usually when you are using !important that means the css rule is not acting how you would like it to act - due to a conflict with other rules or styles (internal or external). !important is typically - not always - a quick fix. Do professionals use it? All the time. For example - in Bootstrap 4 - the class "text-right" is marked up as follows:

.text-right {
        text-align: right !important;
}

This is great for reading - meaning you know a text will be on the right side of the screen, however in mobile view if you want to align the text differently - this will be an issue as the media query will not work. Therefore, if you can avoid using it - do. Either understand the conflict of why the new style you are applying does not work, or create a "protected" style that only works for that particular element in that section.

Take a look at jsfiddle here and let me know if you have questions.

Happy coding!