user3003605 user3003605 - 10 months ago 44
CSS Question

CSS selectors (adjacent sibling and nth-child/nth-of-type)

I would like to target 'Person 2' without using nth-child/nth-of-type selector however I can't seem to narrow down using adjacent sibling selectors at the moment:

<div id="myID">


<blockquote title="quote">
<p>Statement 1</p>
<cite>Person 1</cite>

<p>Statement 2</p>
<cite>Person 2</cite>

<p>Statement 3</p>
<cite>Person 2</cite>


blockquote[title="quote"] cite {
color: red;

Above code targets Person 1 however "cite + cite" or "blockquote[title="quote"] cite + cite" does not work. What am I missing here?

Also, could you explain how would I go about changing color of the last ? I have tried nth-child/nth-of-type selector however it selects multiple each time:

<h2>Paragraph 1</h2>
<p><em>Lorem ipsum dolor sit amet</em>, Lorem ipsum dolor sit amet. <em>Lorem ipsum dolor sit amet</em>.</p>
<h2>Paragraph 2</h2>
<p>Lorem ipsum dolor sit amet. <em>Lorem</em> ipsum dolor sit amet.
<h2>Paragraph 3</h2>
<p><em>Lorem </em> ipsum dolor sit amet.</p>
<p><em>Change my color!</em>

em:last-of-type {
color: red;

Thank you.

Answer Source

Answer for first question

blockquote[title="quote"]+blockquote cite { color: red; }

Updated fiddle

Answer for second question

p:last-of-type em:last-of-type { color: red; }

Updated fiddle