Как выбрать первый и последний дочерний элемент родительского элемента?

Question

Как выбрать первый и последний дочерние элементы этого. Итак, выбраны <ul> и последние <p>?

<blockquote> 
    <ul></ul> 
    <p></p> 
    <p></p> 
    <p></p> 
</blockquote> 

Я думал, что это будет работать:

blockquote:first-child {...} 
blockquote:last-child {...} 

, но это просто выбирает элемент? Благодарю.

Answer 1

Вы должны использовать потомок комбинатор (белый-пространство между и :first-child псевдо-класса:.

blockquote :first-child {...} 
blockquote :last-child {...} 

JS Fiddle demo

Как написано, ваш селектор был выбор который сам был :first-child, и , который был, сам, :last-child, его родительского элемента.

Ссылки:

• CSS Selectors.