CSS: Selecting unrelated element using element:hover pseudoclass

Question

I have a button on my webpage. I want to use CSS pseudo-classes to make changes to a different part of the document when the cursor hovers over the button. This is what I've tried:

<div id="content">
    <p id="foo">blah blah blah</p>
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div id="bar">bar</div>
    </div>
</div>

And the corresponding style sheet:

#bar:hover #foo {
    color: green;
}

But of course this doesn't work, because in CSS you can only use a selector of the format A B to select a B descendant of element A. With the new CSS3 spec, it's possible to select a sibling element of A using some new pseudo-classes.

But is there a way to select one (or more) elements B that are more like distant cousins to A?

I was thinking of a couple solutions. One: use Javascript. This doesn't sound too appealing to me because I'm hoping to make my page entirely functional without JS, in case there is somebody browsing my page who has JS disabled in their browser. Also I'm hoping to keep things simple. The second solution: put the foo div inside the bar div and then use position: absolute to move foo where I want it to end up. This is a messy solution, for reasons that should be obvious.

Answer 1

Yeah, but not with CSS. Use JavaScript. Here's a jQuery example.

$('#bar').hover(
  function(e) {
    $foo = $('#foo');
    $foo.data('prevColor', $foo.css('color'));
    $foo.css('color', 'green');
  },
  function(e) {
    $foo = $('#foo');
    $foo.css('color', $foo.data('prevColor'));
  }
);

Answer 2

You could put it inside the container and then absolutely position it outside of the container's DOM flow to give the same effect. It's not totally ideal but it's possible:

<div id="content">
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div class="foo" id="bar">bar<p id="foo">blah blah blah</p></div>
    </div>
</div>

#content {
    height:80px;
}

#foo {
    position:absolute;
    top:40px;
}

#bar:hover #foo {
    color: green;
}

http://jsfiddle.net/Uyypc/

Answer 3

THE “PARENT” SELECTOR

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3

CSS 3 Selectors Spec & CSS 2 Selectors Spec

In the meantime you'll have to resort to JavaScript if you need to select a parent element.

---

The CSS Selectors 4 Spec provides a syntax for defining the "subject" of a selector by using a ! sign. As of 2012, this is not available in any browser.

Using CSS4 selectors, the original question could be solved with this:

li! > a.active { /* styles to apply to the li tag */ }

---

MooTools has supported CSS level 4 selectors for a couple of years now - and ironically, the Slick selector engine in MooTools actually was able to process these selectors before the spec draft was even published -->How do I specify a different subject for the selector?