CODEWITHSUNDEEP
htmlcss
Golo Roden
Golo Roden

Reputation: 150624

CSS precedence and !important

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?

Upvotes: 0

Views: 112

Answers (1)

Quentin
Quentin

Reputation: 943556

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 * {

Upvotes: 4

Related Questions