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

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?

htmlcsscss-cascade


Solution 1:[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.

Solution 2:[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.

Solution 3:[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;"].

Solution 4:[4]

You can modify the colour of HTML element using javascript.

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

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

Solution 5:[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

Solution 6:[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.

Solution 7:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BoltClock
Solution 2
Solution 3 Donnie D'Amato
Solution 4 Mohd Asim Suhail
Solution 5 Kinari
Solution 6 Maher Fattouh
Solution 7 Jeremy Walker

Related Questions