Почему: last-child не работает, когда внутри нас больше элементов?

Question

См. Этот пример 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} не применяется в этом состоянии.

Динамически может быть больше ссылок, и я хочу назначить разные стили для Первого и последнего Якоря.

Answer 1

:last-child будет соответствовать только последнему элементу родителя, независимо от его типа (в вашем примере :last-child будет соответствовать только <input>). Используйте :last-of-type, чтобы соответствовать последнему элементу определенного типа в родительском элементе, например:

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

Answer 2

В этом примере <a href="#">world</a> - не последний дочерний элемент родительского элемента <div class="round-buttons"> - последний дочерний элемент этого элемента <input name="q" ... >

Селектор: first-child и: last-child не учитывает тип элемента - все элементы равны. Вы можете поместить свои теги в div или span

см. http://jsfiddle.net/jwmCd/4/

Answer 3

Поскольку a не последний ребенок, последний ребенок form

Answer 4

Форма - последний объект. Вы можете поместить ссылки в отдельный div и вызвать последнего ребенка из этого.

<div>
    <div>
        <!-- LINKS HERE -->
    </div>
    <form></form>
</div>