Override row color on a single row inside a table with alternating row colors

Question

I've got a table with CSS3 alternating row styles but I need to override the styling for a few rows.

Here is the CSS for the table:

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}

I need to override some rows with a very different background-color (and other formatting), and I was hoping to just add a class= to the individual rows, but it appears that this does not override the above CSS.

e.g.

<table class="primary">
    <tr><td>one</td></tr>
    <tr class="new"><td>two</td></tr>
    <tr><td>three</td></tr>
</table>

Alternatively I'll need to skip CSS3 and just use a class="row1", class="row2", class="new" instead.

Any suggestions on how to override the nth-child with a class?

Answer 1

As classes and pseudo-classes share the same specificity, it should be enough to define the .new style rule after the :nth-child() rules like this, assuming a single class is to overidde all other styles:

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}
table.primary tr.new {
    background-color: #ffc;
}

jsFiddle demo

Answer 2

try this

table.primary tr.new:nth-child(odd) {
background-color: #ff0000;
}
table.primary tr.new:nth-child(even) {
background-color: #000000;
}