title: CSS sibling selector (~) with inverted order
body: <p>I am using CSS sibling selector (~) this way:</p>
  
  <pre><code>X:hover ~ Y { }
  </code></pre>
  
  <p>It seems like it works only when X are located before Y (in the HTML).
  Can be shown at <a href="http://jsfiddle.net/8LFWR/" rel="nofollow">http://jsfiddle.net/8LFWR/</a></p>
  
  <p>Placing Y before X makes it stop working.
  See <a href="http://jsfiddle.net/6WLhe/" rel="nofollow">http://jsfiddle.net/6WLhe/</a></p>
  
  <p>Any idea how can I fix it?</p>