77

If you have

<div style="display: none !important;"></div>

Is there a way to override that in the style sheet to make it displayed?

Preferably using something similar to this:

div { display: block !important; }
TylerH
  • 20,799
  • 66
  • 75
  • 101
Jeffrey Basurto
  • 1,425
  • 1
  • 10
  • 24
  • 3
    For overriding the `display: block !important`, `visibility: hidden;` will work. Anyway, not related to the question. But thought to share. –  Mar 02 '17 at 11:57

7 Answers7

87

Let me begin by saying that generally inline styles can be overridden:

.override {color:red !important;}
<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>

This behavior is described in W3 specs, where it is stated that !important declarations do not alter the specificity, but rather take precedence over "normal" declarations.

That being said, when conflicting rules both have the !important flag, specificity dictates that an inline rule is applied - meaning that for OP's scenario, there's no way to override an inline !important.

Sumit
  • 2,242
  • 1
  • 24
  • 37
Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 12
    The OP clearly states `inline !important` - please read properly! Nonetheless +1 for good answer. – Christoph Jun 22 '12 at 07:28
  • 2
    @Christoph: but the answers just as clearly state "you can not override inline CSS", "inline has higher precedence"... That's wrong hence the original phrasing of my answer. I don't expect everyone to edit their answers to correct the mistake – Oleg Jun 22 '12 at 07:29
  • 9
    Your answer says nothing about overriding `!important` inline styles. The question asks about overriding `!important` inline styles only. – BoltClock Jun 22 '12 at 07:32
  • 2
    @BoltClock: well, I do say there's no way to override an inline important (except w/user styles, but that's outside of OP's control). I'm concerned about the phrasing used in other answers suggesting that a vanilla inline rule cannot be overridden. – Oleg Jun 22 '12 at 07:34
  • The last sentece is not quite correct. If the users browser has a custom css rule with !important that overrides even inline css rules with !important. So the only way is to have a custom css rule in the browser with !important for that specific (type of) element. – Kai Lehmann Aug 29 '21 at 10:21
31

You cannot override inline CSS if it has !important. It has higher precedence than the style in your external CSS file.

However, if you want it to change some actions later on, you can use a bit of JavaScript.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Shakti Singh
  • 84,385
  • 21
  • 134
  • 153
9

You can not override inline CSS having !important, because it has higher precedence, but, using JavaScript, you can achieve what you want.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25
6

You cannot override inline style having !important. First preference is inline style.

For eg: we have a class 

.styleT{float:left;padding-left:4px;width:90px;}

and in jsp 

<div class="styleT" id="inputT" style="padding-left:0px;">

here doesn't take the padding-left:4px; .It takes class styleT except the padding-left:4px;. There will be padding-left:0px;.

ıllıllı lק ıllıllı
  • 808
  • 2
  • 19
  • 40
2

Here is a simple jQuery solution.

$(document).ready(function() { 
$('div').css('display','block');
})
sameeuor
  • 664
  • 7
  • 17
2

You can see this example! There are several rules for CSS selector. The strongest selector is inline (if same level with/without !important). Next ones: id, class, etc. So if a tag is already stylized by inline css with !important, you just have a way: use Javascript to change. 

var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
  pid.style.color = '';
});
p{color:violet !important;}

*{color:blue !important;}

html *{color:brown !important;}

html p{color:lighblue !important;}

.pclass{color:yellow !important;}

#pid{color:green !important;}
<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>

<button id='button'>Change color by JS</button>

As you see, the style by inline css was removed and the id is the strongest selector now !

Freelancer
  • 837
  • 6
  • 21
0

Precedence rules when two CSS properties apply to the same node:

  • !important beats not-!important. If equally !important, ...

  • style attribute beats css in a file. If both are in css files...

  • an ID in the CSS selector beats no ID. And more IDs beat less. (and you thought there was no reason for two IDs in a selector.) If same ID count...

  • Classes, or attributes like [name] in the selector, count them; more beats less. If all those are the same...

  • tag names like span or input, more beats less.

So you see the inline !important is the highest precedence.

OsamaBinLogin
  • 609
  • 6
  • 10