title: nth-child does not work as expected
body: <p>When I add divs together with the objects that I use nth-child on, it seems to get buggy.</p>
  
  <p>I'll appreciate any help with this.</p>
  
  <pre><code>&lt;html&gt;
  &lt;style&gt;
  .documents &gt; a:nth-child(2) {
      border:1px solid red;
  }
  &lt;/style&gt;
  
  &lt;div class="documents"&gt;
      &lt;!-- NO DIVS: WORKS FINE --&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div class="documents"&gt;
      &lt;div&gt;&lt;/div&gt;&lt;!-- ONE DIV: STARTS WITH THE FIRST OBJECT --&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div class="documents"&gt;
      &lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;!-- TWO DIVS: DOES NOT WORK --&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
      &lt;a href="#"&gt;Test&lt;/a&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nwrhU/" rel="noreferrer">http://jsfiddle.net/nwrhU/</a></p>