[css] How to override !important?

I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:

td {height: 100px !important}

Is there some way I can override this?

This question is related to css

The answer is


Override using JavaScript

$('.mytable td').attr('style', 'display: none !important');

Worked for me.


The !important should only be used when you have selectors in your style sheet with conflicting specificity.

But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class in your HTML which you can use to create a more specific selector which doesn't need the !important rule.

td.a-semantic-class-name { height: 100px; }

I personally never use !important in my style sheets. Remember that the C in CSS is for cascading. Using !important will break this.


This can help too

td[style] {height: 50px !important;}

This will override any inline style


Okay here is a quick lesson about CSS Importance. I hope that the below helps!

First of all the every part of the styles name as a weighting, so the more elements you have that relate to that style the more important it is. For example

#P1 .Page {height:100px;}

is more important than:

.Page {height:100px;}

So when using important, ideally this should only ever be used, when really really needed. So to overide the decleration, make the style more specific, but also with an override. See below:

td {width:100px !important;}
table tr td .override {width:150px !important;}

I hope this helps!!!


Disclaimer: Avoid !important at all cost.

This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.

_x000D_
_x000D_
@keyframes forceYellow {_x000D_
  from {_x000D_
    background-color: yellow;_x000D_
  }_x000D_
  to {_x000D_
    background-color: yellow;_x000D_
  }_x000D_
}_x000D_
_x000D_
div {_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  margin: 0 auto;_x000D_
  background: red !important;_x000D_
  animation: 1s linear infinite forceYellow;_x000D_
}
_x000D_
<div></div>
_x000D_
_x000D_
_x000D_


In any case, you can override height with max-height.


I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:

$('.active').css('cssText', 'border-radius: 0px !important');