title: How do I add :hover on the nth child of an element using CSS2 selectors?
body: <p>I'm trying to give each menu li a unique background color on hover, and I want to do it using css2. </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
      &lt;li&gt;
      &lt;li&gt;
      &lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I was able to add a background onto the first element, using the following:</p>
  
  <pre><code>nav ul &gt; li:hover:first-child a { background-color:red !important; }
  </code></pre>
  
  <p>When I add a different background onto the 2ndelement, the hover effect for the next element appears only when I place my cursor over the first element.</p>
  
  <p>This is my code so far:</p>
  
  <pre><code>nav ul &gt; li:hover:first-child a { background-color:red !important; }
  nav ul &gt; li:hover:first-child + li a { background-color:blue !important; }
  </code></pre>
  
  <p>Is there a proper way to do this with CSS2?</p>
  
  <p>I'm tried to get some insight into this Boltclock's answer in the link below.</p>
  
  <p><a href="https://stackoverflow.com/questions/9682521/how-do-i-get-the-nth-child-of-an-element-using-css2-selectors">How do I get the nth child of an element using CSS2 selectors?</a></p>
  
  <p>Any help would be greatly appreciated.</p>