title: Can someone explain why the "nth-child"-selector has a higher priority than "hover"?
body: <p>Yesterday I ran into this: One of my <code>:hover</code>-states stopped working. I found out that If I change this:</p>
  
  <pre><code>div.item {}
  div.item:hover {}
  div.item:nth-child(even) {}
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>div.item {}
  div.item:nth-child(even) {}
  div.item:hover {}
  </code></pre>
  
  <p>it works again.</p>
  
  <p>I've created a <a href="http://jsfiddle.net/YLLLh/">demo on jsfiddle</a> to show both cases.</p>
  
  <p>Can somebody explain, why the <code>:hover</code>-state is overwritten by the selector?</p>