CODEWITHSUNDEEP
htmlcss
giles
giles

Reputation: 11

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

Upvotes: 1

Views: 148

Answers (4)

Rimantas
Rimantas

Reputation: 1491

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.

Upvotes: 2

jsnfwlr
jsnfwlr

Reputation: 3798

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

Upvotes: -1

vitch
vitch

Reputation: 3214

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

Upvotes: 5

Ben
Ben

Reputation: 57209

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 }

Upvotes: 1

Related Questions