CSS precedence and !important

Question

I have a web application which - in its automatically rendered default CSS - includes the following style:

body * { line-height: 1.22em; }

So far this is fine, but for a specific table I want to override this line-height. Unfortunately, this table is also automatically rendered, hence I have no influence on how it is rendered. Nevertheless, I have a class on this table.

So, what I am doing is add a line to my custom CSS which says:

.tableclassname { line-height: 1em !important; }

Unfortunately, this is ignored.

Does anyone have an idea why?

And, as second question: What would be the right way to tell the browser to use a line-height of 1em for every element with class tableclassname and all subsidiary elements?

Answer 1

Unfortunately, this is ignored. Does anyone have an idea why?

Without seeing the markup, it is hard to be sure, but the odds are that the class is on the table.

!important applies only to the cascade, not to inheritance.

The table cells also match body *, so they don't have line-height: inherit and get the value from the style sheet instead of their parent.

for every element with class tableclassname and all subsidiary elements

Use a descendant combinator, just like body * is using.

.tableclassname, 
.tableclassname * {