Need help with css rules for hovering

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? 开发者_如何学Go 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/

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.

With your html structure, you can't.

• Example of something close of what you wan't without javascript.
• What you want with jQuery

Note that you can't have id's starting with number in CSS.

You can do something similar with css3 sibling combinator, but I did not acheived exactly what you want. But that's interesting... http://jsfiddle.net/Johnny5/WJLGs/3/