html - alter css on another div not working as it is not in the same element -

#match1 not change when hover on #id1? worked when both in same div element on page stops working when #id1 inside div.

i want use css no javascript please!

http://jsfiddle.net/fhzen/

html

<div>     <div id="id1">div</div>      <div id="id2">div</div>      <div id="id3">div</div>  </div>   <div id="match1">a </div> <div id="match2">b </div> <div id="match3">c </div> 

css

#id1:hover ~ #match3 {   color: red;       font-weight:bold;     font-size:40px; } 

you using preceding selector

the preceding selector targets precedent element same parent 1 of target , if want target match3 div being preceed id1 markup should follows

<div>     <div id="id1">div</div>      <div id="id2">div</div>      <div id="id3">div</div>      <div id="match1">a </div>     <div id="match2">b </div>     <div id="match3">c </div> </div> 

but... in spite of that, if looking target both (match3 & id1) when hover id1, wont able without javascript

this because have single subject , targeted right simple selector in selector chain.

#id1:hover ~ #match3 {   color: red;       font-weight:bold;     font-size:40px; }