Search code examples
csscss-specificity

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)

Solution

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