CODEWITHSUNDEEP
jquerycsscss-specificity
Gordon
Gordon

Reputation: 1651

jquery : alternate row colour in table except cell with class to keep background colour

I am new to jquery. I have this in my code:

$("tbody tr:odd ").addClass("alt");

with css:

tbody tr.alt td {
   background-color: #e6EEEE;
}

I have a cell in table with 

<td class="coloron">

Right now, the every other row command is over riding my class="coloron".

How can I maintain my cell unique colour while having every other row colouring?

Upvotes: 0

Views: 1571

Answers (4)

Moin Zaman
Moin Zaman

Reputation: 25445

try adding this in your CSS:

.coloron, .coloron.alt { background:red }

Upvotes: 0

aularon
aularon

Reputation: 11110

use css !important:

td.coloron {
    background: #ccc !important;
}

Upvotes: 0

Ben Everard
Ben Everard

Reputation: 13804

Your tbody tr.alt td is more specific than .coloron and will override it, instead do something like this:

tbody tr.alt td.coloron {
   // your CSS
}

Or perhaps this:

tbody tr td.coloron {
   // your CSS
}

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

Define the styles so that your unique color is defined later in the stylesheet, like this:

tbody tr.alt td {
  background-color: #e6EEEE;
}
tbody tr td.coloron {
  background-color: #FFFFFF;
}

If a row has multiple classes, given the same level of specificity in the style rule, the one defined last in the CSS wins. You can see it working here.

Upvotes: 2

Related Questions