Применение последнего элемента к элементу не работает

Учитывая, что у меня есть следующие теги:

<div id="div-one">
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
    <div class="div-two">some </div>
    <input type="hidden" value=""/>
</div>

Когда я пытаюсь применить стиль к элементу last "div-two", используя этот синтаксис css:

#div-one div.div-two:last-child  { border-bottom:solid 1px #999; }

Это не работает, если я не удаляю скрытые поля. Любые предложения относительно того, почему?

  • Здесь ссылка на jsfiddle: http://jsfiddle.net/67qYJ/1/
  • Использование Google Chrome v12.0.742.100
  • НЕ возможность размещения скрытых тегов в другом месте

Ответы

Ответ 1

Ваш селектор не работает для вашей текущей разметки, потому что последний ребенок - это input, а не div.div-two.

Может ли div#div-one содержать только эти два типа элементов? Если это так, вы можете использовать :last-of-type вместо этого, который выбирает последний div (хотя независимо от его класса):

#div-one div:last-of-type { border-bottom:solid 1px #999; }

Однако, если ваши внутренние элементы div имеют другие классы помимо .div-two, будет довольно сложно выбрать последний элемент .div-two. Ваш заданный код упрощает работу, поскольку div и input - это разные типы элементов, и присутствует только класс .div-two.

Ответ 2

Если вы не можете использовать last-of-type, как, например, @BoltClock, вы можете просто добавить второй класс к последнему .div-two в группе.

http://jsfiddle.net/watss/

<div class="div-two last">some </div>

и

#div-one > .div-two.last { border-bottom:1px solid; background:yellow; }

или еще лучше

#div-one > .last { border-bottom:1px solid; background:yellow; }