classes within pseudo-class

I'm interested in building a menu bar that's backwardly compatible. I'd like to use just HTML and CSS. So I'm thinking a table with a number of cells each set with a different bkgnd开发者_高级运维 color dependent on it's state. Something along the lines of ....

a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}

a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}

(I'm thinking something like this as I want to whole of the cell, not just the text in the cell to be effected). Obviously this example does not work ... but is there a way??

Thanks in advance

Giles

---

You probably shouldn't think of a table anyway. You can easily style a UL to have the appearance of navigation and this is much more semantically correct.

Anyway - from the CSS above I guess you have a table inside you link? If so then the correct syntax would be:

a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }

etc etc

(if you want to use color names then you don't use the # symbol. If you are using hex values then use the # as I did above).

Or do you have links within the cells? In that case you would switch the items around e.g.

.cell01 a:link {background-color: white; }

Hope it helps!

---

Update:

Ahh - Steve's answer above gives me a slightly better idea of what you are trying to do... You have the links within the table cell and you want the whole cell to change when it is hovered over? Then simply:

.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }

Note that this won't work correctly on IE6 as in IE6 only A elements have hover state. You can work around this by adding an additional class in Javascript if necessary...

---

First: don't use tables for layout, or navigation. There is no need for that. UL usually is the best choice for the task. Second: make your a elements block level and some padding and style as you wish: http://kod.as/lab/nav/

See http://css.maxdesign.com.au/listamatic/ to learn more.

---

If you want to affect the whole of the cell, you need to apply the css to the parent. Then, the child <a> tags can act separately. Something like this:

parentCell { background:white; }

parent1:hover { background:red }
parent2:hover { background:blue }

parent1:hover a { font-weight:bold }
parent2:hover a { font-style:italic }

---

I am assuming your HTML looks like this:

<table>
   <td class="cell1">
       <a href="#">Link</a>
   </td>
   <td class="cell2">
       <a href="#">Link</a>
   </td>
</table>

If this is the case, what you are asking is not possible using HTML and CSS alone. CSS doesn't allow you to target the parents of a selector in any way. JQuery can do what you are asking using .parent()