I have been attempting to style the first link in an li element with a specific font color.
When the li element is clicked, it gains the "open" class.
I've tried using both li a:first-of-type and li a:first-child pseudo-classes to achieve this, but unfortunately, the color ends up applied to all children within the li:
https://i.sstatic.net/6mhz9.png
How can I use CSS to only apply the color to the first child? Specifically, in this case, "Section 2".
li.open a:first-of-type {
color: blue !important;
}<ul>
<li>
<a href="#">Section 1</a>
<ul class="off-canvas__nav-sub">
<li><a href="#">Sub page 1</a></li>
<li><a href="#">Sub page 2</a></li>
<li><a href="#">Sub page 3</a></li>
</ul>
</li>
<li class="open">
<a href="#">Section 2</a>
<ul class="off-canvas__nav-sub">
<li><a href="#">Sub page 1</a></li>
<li><a href="#">Sub page 2</a></li>
<li><a href="#">Sub page 3</a></li>
</ul>
</li>
<li>
<a href="#">Section 3</a>
</li>
<li>
<a href="#">Section 4</a>
</li>
<li>
<a href="#">Section 5</a>
</li>
</ul>