CSS selector that applies a style to COLGROUP but only within TBODY (not THEAD)?

Question

I would like to apply a background-color to a COLGROUP, but only within the TBODY of the table. Given a typical calendar table with a structure as the following:

<table>
  <colgroup class="weekdays" span="5"/>
  <colgroup class="weekend" span="2"/>
  <thead>
    <tr>
      <td/><td/><td/><td/><td/>

      <!-- I'd like the columns of the following two cells to be untouched. -->
      <td/><td/>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td/><td/><td/><td/><td/>

      <!-- I'd like selector to apply the style only to the columns of the following two cells -->
      <td/><td/>
    </tr>
    ...
  </tbody>
</table>

Is there a CSS selector (or something similar) which lets me apply a different style to the "weekend" COLGROUP in the THEAD and TBODY?

Answer 1

With your example HTML as it stands, I don't believe there's a single selector that will achieve what you want. The colgroup element is rather unique when it comes to CSS behaviour, since setting the style for a colgroup ends up affecting elements that are (by CSS inheritance rules) completely unrelated to the colgroup. This means you can't use a selector such as colgroup.weekend tbody, because the tbody isn't a child of the colgroup (or vice versa) and it just doesn't inherit that way.

The closest I could come to achieving what you want is the following:

thead td { background-color:white; }
colgroup.weekend { background-color:red; }

thead td is a more specific selector than colgroup.weekend, so you end up 'overriding' the colgroup's colour for the header.