Accessing other CSS divisions from one division

Question

I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:

#home a:hover
{
  background-image:url(images/template_03_1.png);
  position:relative;
  top:3.5em;
  left:0.5em;
}

Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.

Thanks, niting

Answer 1

Am I correct if I assume you want the following?

#home a:hover
{
 #home.background-color: #fff;
}

If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.

Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.

In other words, recursion with CSS-selectors is not possible (or I don't know about it...)

Answer 2

You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.

Answer 3

If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.