How to cover! important?

Question

I created a custom stylesheet that overrides the original CSS of my WordPress template. However, on my calendar page, the original CSS sets the height of each table cell using the !important declaration:

td {height: 100px !important}

Is there any way to override this?

Answer 1

In addition to overriding the style set by the style attribute, !important is only used if the selector in the stylesheet matches the specificity .

However, even if your specificities conflict, it is better to create a more specific selector for the exception. For your case, it's better to include a class in the HTML, which you can use to create more specific selectors that don't require !important rules.

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

I personally never use !important in a stylesheet. Remember, the C in CSS stands for cascade. Using !important will break this.

Answer 2

Override !important modifier

1. Just add another CSS rule using !important and give the selector more specificity (add extra tags, ids or classes to the selector)
2. Add a CSS rule with the same selector after an existing rule (in a tie, the last defined rule wins).

Some examples with higher specificity (first is highest/coverage, 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 selector:

td {height: 50px !important;}

Disclaimer:

Using !important is almost never a good idea. This is poor engineering by WordPress template creators. It virally forces users of the template to add their own !important modifiers to override it, and limits the options for overriding it via JavaScript.

However, it would be useful to know how to override it if needed at times.