div's :nth-child(2) background-color is also changing body background-color
<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>