Need help with css rules for hovering

Question

Given the following html:

<div>
  <div id="A1"></div>
  <div>
    <div id="B1" style="float:left;"></div>
    <div id="B2" style="float:left;"></div>
    <div style="clear:both;"></div>
  </div>
</div>

How do I make it so that hovering over 1B changes the bg color of 1A and 1B? Also, how do I make it so hovering over 2B changes the bg color of 1A and 2B? NO JAVASCRIPT.

For your added convenience, here is a jsFiddle to work from: http://jsfiddle.net/WJLGs/

Answer 1

You can't. CSS has no selector that allows you to select an element based on its descendants or later siblings. The element you select has to be at the end of the chain.

You could match #1B or #2B based on #1A:hover, and you can match #2B based on #1B:hover — but they are all things that appear later in the document.