Question

I have a table with rows of alternating colors, e.g.:

<table>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>  
</table>

I want to highlight a bunch of the table cells, but in a different way if the cell is in an even or an odd row, as multiple vertically-stacked cells might be highlighted and I want to maintain the alteration of row color. What I first came up with was to just create two classes, highlight_even and highlight_odd, figure out in my javascript code (as this highlighting will be done dynamically) whether the row is even or odd, and set class accordingly, e.g.:

<table>
  <tr class="even"><td></td><td class="highlight_even"></td></tr>
  <tr class="odd"> <td></td><td class="highlight_odd"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight_odd"></tr>  
</table>

The colors are very straightforward, though. I want to make highlight_even by blending green into the even color, and highlight_odd by blending the same green into the odd color. Is there any way to accomplish that in css, such that that same highlighted table could just look like this?

<table>
  <tr class="even"><td></td><td class="highlight"></td></tr>
  <tr class="odd"> <td></td><td class="highlight"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight"></tr>  
</table>

Something like (in pseudocode):

td.highlight {
    background-color: blend #ff0 into existing background-color;
}

Answer 1

Why not just define the blending manually? You shouldn’t need multiple highlight_* classes to do this, either. Assuming even rows are #ff0 and odd rows are #f0f and a plain white highlight:

tr.even td.highlight { background: #ff8; }
tr.odd td.highlight { background: #f8f; }