More important than !important (a higher level !important)?

Question

The title says most of it. Is there a CSS keyword which overrides !important at one higher level or is there some feature like this planned in any newer CSS spec?

Of course, I know that !important is a bit likely to be used by noobs and that in many cases it is not the best way to go as stylesheets may really suck if badly written. However, sometimes it's useful and even needed.

The strongest style in CSS I can think of is an inline style with !important like this:

<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>

Now let's assume that I cannot edit the HTML and must modify the style from an external stylesheet.

It would be really great to have something like:

#bluebeaver {
    color: blue !important 2;
}

If they had levels for it like for instance with z-index.

Is there any solution to this or anything planned with newer CSS specifications? So far I did not find anything.

Can you show a CSS solution to override an !important inline style or is there definitely no possibility?

Urata

why should you use !important on inline style on the first place ? a misunderstanding of the use of CSS ? If it is because of a javascript , then , the good practice is to add/remove class and not reset CSS on the fly .... – Helbonna

No, thankfully, there is no super-plus-important. And this question is, I think, basically a clear demonstration of the problems caused through the cavalier, inconsiderate, use of the !important key word. – Zn

From CSS Tricks: "The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise". – Intercalary

sometimes its[sic] useful and even needed [citation needed] After 20 years working in CSS, I've yet to find a place where I've had to use !important. – Boloney

@MikeMcCaughan Example: Inline styles must be overwritten from external stylesheet :-) Furthermore in some cases where you have bloated CSS files with thousands of rules (usually from Themeforest template creators or from SASS generated CSS) then it just saves you countless hours of overwriting all this rules. – Urata

@Urata The solution to these problems is to a) not use inline styles and b) be more systematic in creating your CSS. The solution is not to compound the problem by adding more CSS rules. This is a bit like paving a paved road because it has some potholes. Then, when that gets potholes, pave it again, until you need a ladder to cross the road from the sidewalk, and everyone's axles are breaking. There's a reason that they tear up the roads every once in a while. – Boloney

If too much is declared important, nothing is important any more. Maybe your problem has a different root cause. – Timeless

Answer 1

No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.

In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.

There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.

Leprechaun

Also see CSS cascade order. – Alverta

Answer 2

Simply remove the style attribute from the element using JavaScript:

document.getElementById("bluebeaver").removeAttribute('style');

Then use your external stylesheet to apply whatever CSS you want.

---

Two reasons why creating higher levels of !important is not a good idea:

1. It sets a bad precedent.

   Adding !important2 would be caving in to poor-coding habits on a global scale. It would be the W3C sending a signal that anything goes.

   You've also opened the door to !important3, !important4, etc. Where does it end?

   Lowering standards and expectations is not a good way for the industry to make progress.
   
   

2. It may not even solve your problem.

   Consider this: The person who set that inline style to color: red !important, obviously wanted that rule to have the highest priority.

   If your idea became real, and there were higher levels of !important, let's say going up to !important10, guess what that person would have used? And you'd still have the same problem, but you'd be here asking if there were any plans for !important11.

Carpometacarpus

Good answer. By the way, I have seen lots of time z-index: 99999; in a page with z-index problems ... – Imperil

Yes. I am forced to follow this because my other developer adds 1important in his code and then again he follows the same 1important technique to override mine. I can't even communicate to him as he ignores it and may point me to this: github.com/twbs/bootstrap/issues/22815 where the author himself has given a lazy reply for god-knows-what reason. Makes it even more confusing unless DevTools gives a better idea. – Ra

Answer 3

The highest order I know of is targeting elements that have inline styles applied. You can actually select the element's style data attribute in the CSS selector to override its style! Check this out:

.blue[style]{
  color:blue !important;
}

<div class="blue" style="color:red;">SO VERY IMPORTANT</div>
    

Of course you can even get more specific by targeting the style specifically, such as .blue[style="color:red;"].

Lexie

A good answer anyway it does not help in the case described: <div class="blue" style="color:red !important;">SO VERY IMPORTANT</div> – Urata

Yes, that is correct. If the !important winds up in the inline style, then it becomes the applied style. However, I must admit, I don't think I've ever seen it done this way. Most assume that the inline style will take precedence and therefore do not go the extra step to include important. – Seasoning

Yes thats true luckily. But what if the author of the HTML file wanted to prohibit the overwriting of the color? – Urata

I suppose that could be a use-case but again generally, the author of the HTML is also the author of the CSS. – Seasoning

Answer 4

You can modify the colour of HTML element using javascript.

document.getElementById('bluebeaver').style.color=blue;

Demo : https://jsfiddle.net/041fhz07/

Odilia

Definitely works, but the question states that one "...must modify the style from an external stylesheet". – Intercalary

If from external stylesheet then there is nothing above !important. – Odilia

Answer 5

Try Specificity: If two selectors apply to the same element, the one with higher specificity wins.

Try to style your element the more specific you can. Maybe use:

 #bluebeaver span {}

Take a look to this link: CSS Specificity: Things You Should Know

Malan

The specificity is true. This obviously will not work ;-) – Urata

Its true, thats why it works as @fauxserious proposed. – Malan

Answer 6

if you want to use CSS only you just declare the new style with !important, the last "important" wins. though I'd avoid using it in the first place unless completely necessary.

it should only be used for styles that are essential for your page/app to work, not things that are expected to change.

another solution is to use JS to remove and/or add classes/id to change the style of the element when you don't want to change the CSS itself.

Betrothal

Answer 7

div.prop1.imp1.imp2 {
  background-color: red !important;
}

div.prop1 {
  background-color: black;
}

div.prop1.imp1 {
  background-color: white !important;
}

If you can't do this since not all elements have the .imp1 class on the list in JavaScript, and you are adding say a highlight on something with a button click (.imp2) . You can specify the 'more important' .imp2 class above the others with !important on it.

This makes the property with the additional imp2 class more important than the .prop1.imp1 style because it is loaded first in the css.

Bobsled