CODEWITHSUNDEEP
htmlcsscss-selectors
hanazair
hanazair

Reputation: 859

last-child not working within my blockquote

I'm trying to add closing quotation marks only to the last paragraph of blockquotes.

My CSS code is as following:

blockquote p:last-child:after{
    content: close-quote;
}

And my HTML is:

<blockquote>
<p>Travel is fatal to prejudice, bigotry, and narrow-mindedness, and many of our people need it sorely on these accounts. Broad, wholesome, charitable views of men and things cannot be acquired by vegetating in one little corner of the earth all one's lifetime.</p>
<p>Here is second paragraph</p>
</blockquote>

Somehow, this isn't working. I've reviewed the specification of :last-child on w3schools, seems all correct.

Here is the actual web-page: http://www.aspenwebsites.com/lothlorien/layouts-typography/

Could you please advise on what I'm doing wrong. Thank you.

Upvotes: 2

Views: 641

Answers (2)

thetont
thetont

Reputation: 810

the code you've posted in the question is different from the code I can see in your webpage...

Actually it doesn't work because in your web-page the last-child in the <blockquote> is not a <p> at all (it is a <footer> element).

the :last-child selector targets to the last child element only and your rule p:last-child is ignored because in the <blockquote> element there's no last-child that is a <p> too.

If you don't want to change your html you should use this selectro instead:

blockquote p:last-of-type:after{content: close-quote;}

Upvotes: 1

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

close-quote can only be used when open-quote is also being used. For example, you would have to do:

blockquote p:last-child:before{
    content: open-quote;
}

blockquote p:last-child:after{
    content: close-quote;
}

If you absolutely want to force a closing quote, you can use:

blockquote p:last-child:after{
    content: "”";
}

However, on your website itself, you actually are using open-quote and it's the :last-child selector that's failing due to your <blockquote> having a <footer> tag as its last child (which isn't in the example you posted.) You should get around this by using the :last-of-type selector.

blockquote p:last-of-type:after{
    content: close-quote;
}

Demo JSFiddle

Upvotes: 2

Related Questions