title: css :hover effect on current and previous elements
body: <p>I have many unordered lists of 5 li in each like</p>
  
  <pre><code> &lt;ul class="Rank"&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>I want to change <code>background-color</code> of current <code>li:hover</code> element and all previous <code>li</code> elements in that list. Suppose, if I hover over 3rd <code>li</code> then 3rd, 2nd and 1st li should have <code>background-color:#00f;</code> </p>
  
  <p>I can do it in jQuery or JavaScript, but I want it in pure CSS. Currently following this article: <a href="http://css-tricks.com/useful-nth-child-recipies/" rel="noreferrer">http://css-tricks.com/useful-nth-child-recipies/</a></p>
  
  <p>I can change background of currently hovered <code>li</code> element with this <code>.Rank li:hover</code> but cannot understand how can I change <code>background-color</code> of the previous elements of that current <code>.Rank</code> list.</p>
  
  <p>From above article I also learnt to change background until <code>nth-chid</code> but cannot figure out how to apply <code>:hover</code> on it.</p>
  
  <pre><code>.Rank li:nth-child(-n+5)
  {
      background-color:#00f;
  }
  </code></pre>