Search code examples
jquerycsscss-specificity

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?

Solution

  • 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.