10
#div p {
    color: red !important;
}
...
#div p {
    color: blue;
}

I understand how !important works, in this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it. Does anybody know any example where !important saves the day?

0

7 Answers 7

15

Consider this:

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

How do you make awesome paragraphs always turn red, even ones inside #someElement? Without !important, the first rule will have more specificity and will win over the second rule.

3
  • @JitendraVyas: Sort of. There are weird rules regarding how IE6 deals with !important. Fortunately, as of 2012 or so, IE6 is pretty much irrelevant, and all other browsers i know of do it correctly.
    – cHao
    Apr 26, 2013 at 14:06
  • and in any case, yes, IE6 handles that fine. It just kinda chokes when you combine class selectors like p.foo.bar
    – nickf
    Apr 26, 2013 at 14:41
  • 3
    How do you make awesome paragraphs always turn red... by using p.awesome, #someElement p.awesome {.... As long as you can find a workaround then !important should be avoided. And this is one case where a workaround exists so in this case !important should not be used.
    – slebetman
    Sep 6, 2013 at 13:35
11

Only as a last resort! This is because once used it is hard to override it. My rules of thumb:

  • Never use !important on site-wide css, or when writing a plugin/mashup.
  • Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
  • Always look for a way to use specificity before even considering !important.
3

!important saves the day in cases where you dont control HTML output and it renders a style='' attribute. Think ASP.NET and other frameworks.

The only way you can then change this styling is by either using javascript or marking your CSS rule as more !important.

1

Also, !important is ignored in IE6/7. So you can make use of it as an IE6/7 hack.

1
  • 2
    !important is not ignored completely though (i.e in the situation i posted). Probably good to note. Jan 11, 2010 at 14:56
1

!important is useful when you're working with someone else's code and can't override an effect simply by using more specific selectors. When I'm asked to come in and add on a page or small set of pages to an existing site and I have to include the existing stylesheets, but can't edit them (either because of lack of access or because the trickle-down effect would break other things), that's where !important comes in handy. Otherwise you should be using selector specificity to override behavior.

1
  • 1
    Certainly a valid scenario, but I think it should be stressed that this is an indication that the original stylesheets are problematically constructed, and a symptom of a wide problem. Aug 21, 2018 at 16:59
0

If your page includes multiple CSS files, the CSS written by you, and additional CSS that go with software written by other parties, you may want some of your CSS marked !important to "guarantee" it will not be overridden by CSS from other included files.

0

don’t use the !important declaration unless you’ve tried everything else first, and keep in mind any drawbacks. If you do use it, it would probably make sense, if possible, to put a comment in your CSS next to any styles that are being overridden, to ensure better code maintainability.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.