Css – Overriding bootstrap table-striped CSS

csstwitter-bootstraptwitter-bootstrap-3

I am trying to change the background-color of rows that contain my found class in a striped bootstrap table. It works for even rows because bootstrap doesn't have a background color for them, but odd rows I am blocked by bootstraps CSS.

Bootstrap CSS:

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

Custom CSS:

 tr.found{
    background-color:#CECBCB;
}

How would I override bootstrap's CSS for only a single row at a time (as you can see in demo, odd rows are not overridden)?

BOOTPLY DEMO

Best Answer

Write specific selector to override the bootstrap ones

table.table.table-striped tr.found td {
    background-color:#CECBCB;
}

Demo

Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.

As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..

Starting off with this

table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped

Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.

Related Topic