CODEWITHSUNDEEP
htmlcss
Jack Thor
Jack Thor

Reputation: 1594

Css rule Applied twice - Overrides !important

So I have these two classes, and they are in separate css file

.conditional { background-color: #ffd0d0 !important; }

 span.fieldz { background-color: #FFFF00; height: auto !important; width: auto !important; }

What happens is that the background color for .conditional is not being applied even thought it has the !important declaration. The HTML looks correct

<span class='conditional' contenteditable='true'>
   <span class='fieldsz' contenteditable='false'>[Usesles Text]</span>
</span>

When I inspect the css I see the rule being applied twice for each class. enter image description here

enter image description here

And when I uncheck the fieldz class (both of them) only then is the background with the !important applied. How is this overriding the the !important declaration? I also have checked to see if I am referencing the .css twice as suggested here in this SO post where the class is applied twice. But I am only referencing each of the .css file once.

Upvotes: 1

Views: 1534

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

I don't know where the double entries in the inspector come from, but the behaviour of the colours is normal.
If you apply !important to a property on an element, it does not override the same property on another element.
So, the .conditional span is pink, and the .fieldz span is yellow, and that's what you see. Since the .fieldz is inside the .conditional, it gets drawn on top of it.

enter image description here

Upvotes: 1

Related Questions