CSS selector that applies a style to COLGROUP but only within TBODY (not THEAD)?
I would like to apply a background开发者_Go百科-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?
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.
精彩评论