title: Why :last-child doesn't work when we have more elements inside?
body: <p>See this example <a href="http://jsfiddle.net/jwmCd/" rel="nofollow">http://jsfiddle.net/jwmCd/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="round-buttons"&gt;
                  &lt;a href="#"&gt;hello&lt;/a&gt;
                  &lt;a href="#"&gt;world&lt;/a&gt;
      &lt;form method="get" action="/search" id="search"&gt;
    &lt;input name="q" type="text" size="40" placeholder="Search..."&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.round-buttons a:first-child {background:red}
  
  .round-buttons a:last-child {background:green}
  </code></pre>
  
  <p><code>.round-buttons a:last-child {background:green}</code> is not applying in this condition.</p>
  
  <p>Dynamically there could be more links and I want to give different styling to First and last Anchor.</p>