How to color first strong element within P tag one color and the rest another color? - css

Question

I'm trying to get :first-of-type to work for the <strong> HTML element but it won't work.
There can be numerous (random number and placement, but within p tags) <strong> elements but I want the first one to have different text color than the rest.
Here I would expect Hello 1 to be blue and Hello 2 + Hello 3 to be yellow. But they're all blue.
.yolo p strong { color:yellow; }
.yolo p strong:first-of-type { color:blue; }
<div class="yolo">
<p>bla bla</p>
<p><strong>Hello 1</strong></p>
<p>bla bla</p>
<p><strong>Hello 2</strong></p>
<p>bla bla</p>
<p>bla bla</p>
<p><strong>Hello 3</strong></p>
</div>
JS fiddle
Any ideas?
Solution doesn't have to include :first-of-type as long as the HTML remains unchanged.

Answer 1

As mentioned, each <strong> element is the first of its element type in its own parent <p>, therefore both elements match the :first-of-type pseudo-class.
Unfortunately, in this case, you may be stuck. Since the first <strong> element may not necessarily appear in the first <p> element as shown in your markup, you won't be able to use something like .yolo p:first-of-type strong to target the first <strong>. Neither is there a way using CSS to target just the first element in such a structure, since the existing structural pseudo-classes only match the nth element among its siblings, and there is no parent selector so you can't write a selector finding "the first <p> element that contains a <strong> element".
Since your markup is produced by a CMS, you will have to either
tell the CMS to apply a class name either to the first paragraph containing a <strong> element or to the first <strong> element, or
use JavaScript to apply the class name if the behavior of the CMS cannot be modified
then target this class.

Answer 2

From css-tricks:
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
This means that this will work:
<div class="yolo">
<p><strong>Strong 1</strong>
<br>
<strong>Strong 2</strong></p>
</div>
But this wont:
<div class="yolo">
<p><strong>Strong 1</strong></p>
<p><strong>Strong 2</strong></p>
</div>
Because in the second example each of the <strong> is the first in its <p> container. But in the first example, the two <strong> tags are both in the same <p> container, so Strong 1 goes blue, being the first one in the paragraph, and Strong 2 goes yellow, not being the the first in the paragraph.