Why :last-child doesn't work when we have more elements inside?

Question

See this example http://jsfiddle.net/jwmCd/

HTML

<div class="round-buttons">
                <a href="#">hello</a>
                <a href="#">world</a>
    <form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search...">
</form>
</div>

CSS

.round-buttons a:first-child {background:red}

.round-buttons a:last-child {background:green}

.round-buttons a:last-child {background:green} is not applying in this condition.

Dynamically there could be more links and I want to give different styling to First and last Anchor.

Answer 1

:last-child will only match the last element of the parent, irrespective of its type (in your example, :last-child will only match the <input>). Use :last-of-type to match the last element of a specific type in the parent, for example:

.round-buttons a:last-of-type {background:green}

Answer 2

Because a is not the last child, the last child is form