CSS Help override !important?

[Rekx]

Is it possible to override the tag important in css? im trying to make a dark theme for a website but the owner has added !important to the background and color of the text.

 

.menu li li a {background: transparent !important; border: none; color: #444 !important;

 

[Hazy125]

Well.... You can just remove the !important but I figure that isn't an option. You can also use javascript to remove the important if that's your only option. So, something like

 

<get your element>.style.background = transparent;

 

should work just fine. Alternatively, you can use your own important tag by giving the a tag a higher specificity. That is, give the <a> tags a class of some sort then set the background rule with the important tag there. Becaus e it's more specific about what exactly is being targeted, it will override the old rule

[Rekx]

Well.... You can just remove the !important but I figure that isn't an option. You can also use javascript to remove the important if that's your only option. So, something like

 

<get your element>.style.background = transparent;

 

should work just fine. Alternatively, you can use your own important tag by giving the a tag a higher specificity. That is, give the <a> tags a class of some sort then set the background rule with the important tag there. Becaus e it's more specific about what exactly is being targeted, it will override the old rule

Thanks (and no its not an option to remove it). The class thing somewhat helped , though everytime i refresh the page with the chrome refresh button (the one beside the url) it removes it, but when i highlight the url and press enter it works

[TAtari]

Is it possible to override the tag important in css? im trying to make a dark theme for a website but the owner has added !important to the background and color of the text.

 

What you could do is make a new css entry with a more "exact" path, easiest way to do that is adding body infront of the style you want to override:

body .menu li li a { background: #000 !important; } /* This style will override the background of .menu li li a */

[dougoftheabaci]

So remember that CSS is all about cascading specificity. Anything can be overridden, you just need to be lower down in the stylesheet and/or more specific.

 

In terms of levels of specificity: inline > style block > stylesheet, and ID > class > attribute > element.

 

It even gets pretty specific in how much one is more specific than the other. But for all intents and purposes, the only thing you can't override without manipulating the DOM with JS is a style attribute defined property with an important flag. Here's a great write-up by Chris Coyier.