user1444027 user1444027 - 3 months ago 26
CSS Question

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?

Answer

Overriding the !important modifier

Simply add another CSS rule with !important, and either give the selector a higher specificity (adding an additional tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

Some examples with a higher specificity:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

But, it's useful to know how to override it, if you sometimes have to.