title: div's :nth-child(2) background-color is also changing body background-color
body: <p>Why is the <code>:nth-child(2)</code> changing the color of the <code>&lt;body&gt;</code> too?
  When set to 1 or 3 this does not happen.</p>
  
  <p><strong>The Code (<a href="http://codepen.io/kreitzo/pen/mPXzWv" rel="nofollow">http://codepen.io/kreitzo/pen/mPXzWv</a>):</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 50px;
    text-align: center;
  }
  div {
    width: 30px;
    height: 30px;
    background-color: red;
  }
  :nth-child(1) {
    background-color: blue;
  }
  :nth-child(2) {
    background-color: green;
  }
  :nth-child(3) {
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>