How can I change Bootstrap table-striped in a less specific way?

Question

I want to change the colors of Bootstrap table-striped. I have read this question: Bootstrap table striped: How do I change the stripe background colour?. So I can change it with, for example:

.table-striped > tbody > tr:nth-child(2n+1) > td, 
.table-striped > tbody > tr:nth-child(2n+1) > th 
{
    background-color: red;
}

However, my apps needs a different color for the "selected row". So I have a CSS class called "selectedRow" that we add it to the tr that are selected. The property is:

.selectedRow td 
 {
    background-color: blue;
    color: black; 
}

I need that for the selected row, background color takes precedence over the Bootstrap table-stripped. That is...for the tr that I add the css class selectedRow I want them blue, not red. Note that I CANNOT use !important here (there is a reason for this).

So is there another way I can do to change Bootstrap table-striped so that my selectedRow css class takes precedence?

Are you trying to select (change background color) multiple rows per row click then, or just give a background color to predefined rows? — Austin, Jun 19 '14 at 13:07
Something like this? **[JSFiddle Demo](http://jsfiddle.net/nBhb5/)** — Austin, Jun 19 '14 at 13:25

score 2 · Answer 1 · answered Jun 19 '14 at 13:01

2

Here is a code from the table.less:

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

Therefore you can use:

.table-striped > tbody > tr:nth-child(odd) > td {
   background-color: #819bbf;
  color: black;
}

JSBin

answered Jun 19 '14 at 13:01

Evgeny Samsonov

2,730
4
19
28

Hi. Maybe I was not clear. If I do what you recommend, I will indeed change Bootstrap table.striped, but then I won't be able to change the backgrlound color with my "selectedRow" class since the precedence will go with the bootstrap one. And I cannot use `!important`. Thanks – Mariano Martinez Peck Jun 19 '14 at 13:09
@MarianoMartinezPeck please see my comment on your question, I think we are misunderstanding your question slightly. – Austin Jun 19 '14 at 13:11

score 2 · Accepted Answer · answered Jun 19 '14 at 13:07

You have to be more specific than the Bootstrap styles.

For example like this:

.table-striped>tbody>tr.selectedRow:nth-child(odd)>td,
.table-striped>tbody>tr.selectedRow:nth-child(even)>td {
    background-color: #819bbf;
    color: black; 
}

I hope you get the idea.

How can I change Bootstrap table-striped in a less specific way?

2 Answers2