CODEWITHSUNDEEP
htmlcss
hyarion
hyarion

Reputation: 2251

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

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?

Upvotes: 10

Views: 13173

Answers (4)

Jarno Argillander
Jarno Argillander

Reputation: 5945

You're missing the opening td tag from the second row.

Then follow BoltClock's instructions :)

Upvotes: 0

Swap
Swap

Reputation: 298

try this

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

Upvotes: 1

Graeme Leighfield
Graeme Leighfield

Reputation: 3005

you know you can put multiple css statements into one class right? then you can override with !important when needed :)

here is a JS fiddle

http://jsfiddle.net/dJWR2/

Upvotes: 0

BoltClock
BoltClock

Reputation: 724452

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

Upvotes: 18

Related Questions