classes within pseudo-class

Question

Hi,

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

Answer 1

I think this is a working example of what you want to do. You add the psuedo class after the real class like this...

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

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

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

UPDATE!

Based on the assumption that you have an anchor within a table cell, you can still achieve what you want, although tables are not recommended for layout purposes.

You need to make the anchor fill the entire width and height of the cell, at which point you can then change the background colour of the link, rather than having to adjust the cell.

.cell01 a, .cell02 a {
    display: block;
    width: 100%;
    height: 100%;
}

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

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

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

Answer 2

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()

Answer 3

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 }

Answer 4

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...

Answer 5

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.