How to override !important?
css
Solution
Overriding the !important modifier
- Simply add another CSS rule with `!important`, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
- 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 (first is highest/overrides, third is lowest):
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.
Problem
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?