title: CSS: select previous sibling
body: <p>I've got a list and want to select the previous and next of the one I am hovering</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Item1&lt;/li&gt;
      &lt;li&gt;Item1&lt;/li&gt;
      &lt;li&gt;Item1&lt;/li&gt;
      &lt;li&gt;Item1&lt;/li&gt;
      &lt;li&gt;Item1&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am able to select the next sibling with the "+" selector. But is there a possibility to get the previous?</p>
  
  <pre><code>ul li:hover + li {
      color:red;
  }
  </code></pre>
  
  <p>I already tried <code>ul li + li:hover</code> but it doesn't work.
  Can't belief there is no tricky hack that I could use.</p>
  
  <p>Sure I can do this easily through Javascript but I don't like using JS where I can get the same result with CSS.</p>