Combining :hover and :nth-child
I'm working on converting a batch of old templates from some well meaning attempts to create web pages by someone who knows just enough to be dangerous (all embedded style-sheets, all layout is done with structural tables, XHTML 1.0 is mixed with HTML 5, etc.), and I'm taking this one document at a time.
One of the requirements is if a table (and yes, a few of these pages do still require structural tables, as much as I'd like to rip that right out across the board) has more than one data column (nearly all the tables have a header column and at least one data column), then every other data column needs to be shaded, or in other words, alternating column colors.
A feature I've added in is the ability to hover over a row and have the whole row turn gray. Due to corporate policy, I've only got a handful of colors to work with, so while I'd love to create a custom color that "pops" on the hover, I'm hoping to stick with the pre-defined color of gray.
Problem is, the two grays (the alternating column color and the hover highlight) are identical. What I'd like to do is have the hovered highlight to invert (return to the document's background color) when the row is highlighted on one of these alternating columns.
Here's what I've come up with:
tr:hover {
background-color: #f5f5f5;
}
col.data_columns:nth-child(odd) {
background-color: #f5f5f5;
}
tr:hover + col.data_columns:nth-child(odd) {
background-color: white;
}
Problem is, it's not working. Any idea what I may be doing wrong on this?
