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)?
Write specific selector to override the bootstrap ones
table.table.table-striped tr.found td {
background-color:#CECBCB;
}
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.