CODEWITHSUNDEEP
css
dbj44
dbj44

Reputation: 1998

How do I select the first and last child of a parent element?

How do I select the first and last child of this. So the <ul> and last <p> are selected?

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

I thought this would work:

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

but that just selects the blockquote element? Thanks.

Upvotes: 0

Views: 52

Answers (1)

David Thomas
David Thomas

Reputation: 253308

You need to use the descendant combinator (the white-space between the blockquote and the :first-child pseudo-class:

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

JS Fiddle demo.

As-written, your selector was selecting the blockquote which was itself the :first-child, and the blockquote that was, itself, the :last-child, of its parent element.

References:

Upvotes: 2

Related Questions