CODEWITHSUNDEEP
css
sab669
sab669

Reputation: 4104

CSS Class with !important is not being applied?

I have this HTML:

.text-success {
    width: 75px;
    padding: 1px;
    color: #4c9709;
}

.SomethingOrOther {
    padding: 0px 0px 0px 37px !important;
    color: #FFA500 !important;    
}

.lineheight {
    line-height: 21px !important;
}
<b><span id="lblSomethingOrOther" class="text-success lineheight SomethingOrOther"><a onclick="SomeAction('Something', 'Other');"><u>Text which appears incorrectly</u></a></span></b>

In the text-success class, we apply a few things but one of them is color: #4c9709; (green). The SomethingOrOther class also applies color: #FFA500 !important; (orange) but when I run the software, the text is the wrong color; it's using text-success's green.

Why is it not respecting the !important flag and using the second color? Tried IE, Chrome, and Firefox.

I can probably remove the text-success class from the HTML but this is behaving correctly on our Live server but not our local test server and I'm trying to figure out why...

Upvotes: 0

Views: 86

Answers (2)

Saleh Mosleh
Saleh Mosleh

Reputation: 544

Try this codes , it works.you can see it here.

<span id="lblSomethingOrOther" class=" lineheight SomethingOrOther"> 
<span >this is blue.</span>
<a onclick="SomeAction('Something', 'Other');"><u class="text-success">this is green.</u>
</a>
</span>

Css :

.SomethingOrOther {
    padding: 0px 0px 0px 37px !important;
    color: blue !important;    
}
.text-success {
    width: 75px;
    padding: 1px;
    color: green ;
}
.lineheight {
    line-height: 21px !important;
}

You have to use !important css attr on parent and other css attr on childes or parent's nodes.

Upvotes: 0

treyBake
treyBake

Reputation: 6560

The issue seems to lie with the specificity value. The more specific you are with css, the higher up in the hierarchy it comes. E.g.

a class is less specific then an id, so the id wins any overrides inline styles are more specific than an id, so styles win.

the !important rule may be in place, but not working due to the specificity of the css. Adding the element type before the class should make the specificity win over other rules (other than inline !important)

example css:

.class {color: #fff;}
#id {color: #000;} /*id will win*/

span.class {color: #fff;}
#id {color: #000;} /*id will lose because span.class narrows down selectors moreso than #id*/

Upvotes: 2

Related Questions