CODEWITHSUNDEEP
csscss-specificity
BrDaHa
BrDaHa

Reputation: 5780

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

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)

Upvotes: 0

Views: 226

Answers (2)

manian
manian

Reputation: 1438

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

Upvotes: 0

Sirko
Sirko

Reputation: 74086

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

Upvotes: 2

Related Questions