How to overrule !important?

Question

I wrote a bit of html with some css styling injected into a third party site. But, their styling is messing with mine due to some !important declarations. I don't want this, and I don't want to use !important in my styles.

What can I do to prevent this?

Example at jsFiddle

Have you tried a more specific selector? I'm not sure whether specificity overrides !important though. — JohnP, Jan 02 '12 at 12:34
I added !important in the left textfield to and it overwrites that !important red. — Dion, Jan 02 '12 at 12:55
True, but that forces me to use !important on all of my styles 'just in case it gets overruled'. I don't like that. — Kriem, Jan 02 '12 at 12:56

score 8 · Accepted Answer · answered Jan 02 '12 at 12:52

8

The !important declaration overrides everything else, even inline styles and more specific hierarchy. The only way to override an !important is with an even more specific !important.

And this is why !important should be avoided.

answered Jan 02 '12 at 12:52

Nix

5,746
4
30
51

So, it's not possible the way I want it then? – Kriem Jan 03 '12 at 08:38
It is possible, you just need to add an `!important` to your declarations. Then the latest declared, or the one that is most specific count. To take your fiddle as an example, if you simply add `!important` to your `color:blue;`, it will override the `color:red !important` in the stylesheet. – Nix Jan 03 '12 at 08:53
Possible to overrule, but impossible without !import. Got it. Thanks. – Kriem Jan 03 '12 at 11:31
this is not entirely true. See my answer below how to do it. !important should still be avoided almost always though – DMTintner Jun 19 '13 at 19:15
@DMTintner That is what I was trying to convey with: "The only way to override an !important is with an even more specific !important". You are adding specificity to your selector, therefore it overrides. – Nix Jun 20 '13 at 07:50

DMTintner · Answer 2 · 2013-06-19T19:09:00.693

1

You can overwrite !important contrary to what most people believe. You can even use this technique to overwrite inline styles applied by JS or 3rd party plugins (ex. Facebook!!) The most powerful way is like so:

td[style] {height: 110px !important;}

It acts as if you injected the style inline to the html because you are applying the styles to the actual style attribute of the tag. The combo of being inline and !important should trump everything, except for a style that is applied later and also inline and !important

Here's a fiddle with the working code: http://jsfiddle.net/9LvzP/ You can see that even though background-color: green !important comes before background-color: blue blue is more powerful and gets applied

edited Jun 19 '13 at 19:09

answered Jun 14 '13 at 22:04

DMTintner

14,405
5
35
32

I can't seem to reproduce. How would this work? (perhaps a jsfiddle?) – Kriem Jun 19 '13 at 11:28
@Kriem sure thing, just added the fiddle into the answer with the working code – DMTintner Jun 19 '13 at 19:09

score 1 · Answer 3 · edited Jun 19 '13 at 19:15

1

Define the class with proper hierarchy that will work for you.

.list .row span{
   color:red !important;
}

<div class="list">
<div class="row">
    <span>Your text </span>
</div>

Try to do something similar to what I have created here.

edited Jun 19 '13 at 19:15

Chris Mukherjee

841
9
25

answered Jan 02 '12 at 12:44

sumit kumar ray

230
3
9

How to overrule !important?

3 Answers3

Linked

Related