Looking to create a custom CSS class that will apply a background color only to the first element with a specific tag...
This is what I have so far:
.blue p:first-of-type {
background-color:#2E9AFE;
}
It works in this scenario:
<div class="blue">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</div>
But doesn't work with this example:
<div class="blue">
<ul>
<li><p>Parent 1</p>
<ul>
<li><p>Element 1.1</p></li>
<li><p>Element 1.2</p></li>
</ul>
</li>
</ul>
</ul>
In the second example, the first p tag is "Parent 1", yet my code applies the color to all elements. Why is this happening?