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?

AakashM
  • 62,551
  • 17
  • 151
  • 186
alexchenco
  • 53,565
  • 76
  • 241
  • 413

7 Answers7

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.

nickf
  • 537,072
  • 198
  • 649
  • 721
  • @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 '13 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 '13 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 06 '13 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.
marsnebulasoup
  • 2,530
  • 2
  • 16
  • 37
slebetman
  • 109,858
  • 19
  • 140
  • 171
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.

Martijn Laarman
  • 13,476
  • 44
  • 63
1

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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
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.

Tom
  • 22,301
  • 5
  • 63
  • 96
  • 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. – Oskar Berggren Aug 21 '18 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.

Wes
  • 1,834
  • 3
  • 15
  • 26
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.

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852