I've been wrestling with understanding the first-child pseudo selector and after studying through this interactive example, I'm feeling quite bewildered.
<div class="[&:first-child]:text-red-500">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<ul class="[&:first-child]:text-blue-500">
<li>jkl</li>
<li>mno</li>
<li>pqr</li>
</ul>
</div>
https://i.sstatic.net/fZOFL.png
The expectation I held
I initially believed that [&:first-child]:text-red-500 would mean
to color the text red for the first child within this particular element (
&)
However, it appears there's more complexity here. Can you shed light on what's truly happening in this scenario?