CODEWITHSUNDEEP
htmlcsscss-selectors
klaasjansen
klaasjansen

Reputation: 557

Why does first-child / last-child not work on blockquote

It might be a stupid question, but why is first-child / lastchild not working on the blockquotes?

CSS

p { margin: 0 0 1.6em 0; }
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; }
blockquote:first-child { padding-top: 25px; color: red; }
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }

HTML

<div>
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
    <blockquote>Lorem ipsum dolor sit amet</blockquote>
    <blockquote>Lorem ipsum dolor sit amet</blockquote>
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
    <blockquote>Lorem ipsum dolor sit amet</blockquote>
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
</div>

Update: What I want in this example:

JS-Fiddle

Upvotes: 2

Views: 411

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

Because they're not the first child or last child, the first child here is the p element.

To target the first blockquote, you may do

:not(blockquote) + blockquote {

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

You are looking for :first-of-type/:last-of-type. As the name of the pseudo class implies, this will style the first/last of the element type.

UPDATED EXAMPLE HERE

blockquote:first-of-type {
    padding-top: 25px;
}
blockquote:last-of-type {
    padding-bottom: 25px;
    margin-bottom: 1em;
}

Upvotes: 7

Related Questions