title: Why is nth-child applying to all buttons?
body: <p>Here is an <a href="http://jsfiddle.net/fCFEn/" rel="nofollow">example of my HTML and CSS</a>. I can't, for the life of me, figure out why the second rule is applying to all the buttons, and not just the first three. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="test"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;button&gt;1&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button&gt;2&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button&gt;3&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button&gt;4&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button&gt;5&lt;/button&gt;&lt;/li&gt;
  &lt;li&gt;&lt;button&gt;6&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#test button
  {
      background-color: blue;
  }
  
  #test button:nth-child(-n + 3) 
  {
      background-color: red;
  }
  
  #test button:hover {
      background-color: green;
  }
  </code></pre>