How does `first-child` work with arbitrary variants in tailwind css?

Question

I've been trying to make sense of the first-child pseudo selector and this toy example has me really confused..

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

My expectation

I thought that [&:first-child]:text-red-500 meant

turn the text red, for the first child of this element (&)

but clearly that's not the case. What's really going on here?

Answer 1

I thought that [&:first-child]:text-red-500 meant

turn the text red, for the first child of this element (&)

That's incorrect. It means

turn the text red, if this element is the first child of its parent.

What you want is [&>:first-child]:text-red-500