user3003605 user3003605 - 2 months ago 8
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:

https://jsfiddle.net/fk5fxbm4/4/

<div id="myID">

<h2>Title</h2>

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

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

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

</div>

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:

https://jsfiddle.net/zs58xbch/7/

<main>
<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>
</main>

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


Thank you.

Answer

Answer for first question

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

Updated fiddle https://jsfiddle.net/fk5fxbm4/6/

Answer for second question

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

Updated fiddle https://jsfiddle.net/zs58xbch/9/