How to blend CSS classes for different results

Question

I have a table where the even rows are given the class "even" and the odd rows "odd". But I also want to give the rows classes like "complete" or "problem" that give them other colors, but I still want the hue of the colors to be dark or light depending on if they're even or odd.

Examples

<table>
    <tr class="even problem">
    <tr class="odd complete">
    <tr class="even complete">
    <tr class="odd complete">
    <tr class="even incomplete">
    <tr class="odd complete">
</table>

Will I have to create separate classes for every combination, or is there some other way?

Thanks for all ideas

Answer 1

Do you mean something like this?

.even{
  background:#ccc;
}

.odd{
  background:#eee;
}

.even.problem{
   background:#900;
}

.odd.problem{
   background:#f00;
}

Answer 2

You could create a semi-transparent PNG file with background for .complete and others classes, so the background color of even and odd class will still be under.

.complete { background: transparent url("path/to/bg.png") top left repeat;}

I didn't test it, but I may work.

Answer 3

I agree too with Ventus's idea. I have created a little demo but instead of using an images a using CSS opacity, to give you a more detailed concept of his idea. The bad thing of using CSS opacity in this example is that your text will inherit the opacity too.

http://jsfiddle.net/ywhR2/