CSS specificity: Selector with ID doesn't override selector with class?

Question

I'm not well versed in CSS, but I understand the basic idea of specificity (or so I think). Recently I was trying to override the table CSS of Bootstrap 3, which was defined for each cell like so (this is a partial bit, the part that was effective on the inspected element):

.table > tbody > tr.danger > td, .table > tfoot > tr.danger > td { background-color: #ddd; }

I was trying to override the background color of the entire row that contained that cell, with this:

table#results > tbody > tr.highlighted { background-color: #ffd15b; }

Which, as I understand it, has higher specificity due to the ID. However it wasn't working at all, until I introduced the child td in my CSS:

table#results > tbody > tr.highlighted > td { background-color: #ffd15b; }

Why didn't my first attempt work? I tried in both Safari and Chrome (latest versions)

Sirko · Accepted Answer · 2017-03-23 22:45:47Z

2

Your problem is not CSS specificity, but merely the background of the cell ( <td> ) hiding the background of the row (<tr>) behind it.

answered Mar 23, 2017 at 22:45

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BrDaHa Over a year ago

So in general does styling on child elements override (or hide) styling on parent elements?

Alohci Over a year ago

@BrDaHa - "In general" doesn't apply here. The background of table cells has specific rules, described in 17.5.1 Table layers and transparency of the spec.

manian · Accepted Answer · 2017-03-23 22:50:08Z

0

Try adding border-collapse property to the parent table like below
table#results { border-collapse: collapse;}

answered Mar 23, 2017 at 22:50

manian

1,4482 gold badges18 silver badges34 bronze badges

1 Comment

BrDaHa Over a year ago

Yeah that doesn't work. I'm not sure this really addresses the question, and it's already applied from the bootstrap normalize.less file

Collectives™ on Stack Overflow

CSS specificity: Selector with ID doesn't override selector with class?

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related