html - Making two other div's change color when hovering over main div -

i have 3 div's. change stuff in 2 of div's when hover on "main"/"first" div. really, really trying avoid use of javascript/jquery, here.

i pretty sure can done, vaguely remember reading while ago cannot find link again , previous searches have not helped, because might not using correct terms.

here's code: html:

<div id=one></div> <div id=two></div> <div id=three></div> 

css:

#one{background-color:blue;width:50px;height:50px;float:left;} #two{background-color:green;width:50px;height:50px;float:left;} #three{background-color:red;width:50px;height:50px;float:right;}  #one:hover > #two + #three { background-color: yellow; } 

can please help? how make other two divs change color when hover on first one?

do mean this?

fiddle

#one:hover ~ #two ,  #one:hover ~ #three   { background-color: yellow; } 

issue > mean immediate descendant selector , combination of selector + won't work.