[&:not(:first-child)] not working

[foremtehan]

Can anyone tell me why [&:not(:first-child)] not working ? https://play.tailwindcss.com/tbY72Pzc4j

<div class="[&:not(:first-child)]:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

[wongjn]

Seems to be working fine, the effect can be seen when adding another copy: https://play.tailwindcss.com/wGwx8KxIvA. If it does not work in your project, consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• The class name would resolve to a Tailwind class that Tailwind would generate a rule for.

[foremtehan]

So the play.trailwindcss.com is the problem rn?

[wongjn]

No, the [&:not(:first-child)]: arbitrary variant works as expected as per the Tailwind Play.

[uigywnkiub]

Not work at all.

[wongjn]

Could you provide a reproducible example please, with details about how you expect it to work vs how it is currently working?

[aryomuzakki]

this is working, but the div is only one, so it will not applied to the div (https://play.tailwindcss.com/tbY72Pzc4j)

<div class="[&:not(:first-child)]:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

while this will make the second list of 1..4 having a red background as expected in https://play.tailwindcss.com/wGwx8KxIvA

<div class="[&:not(:first-child)]:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="[&:not(:first-child)]:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

it is the same as having the class not-first:bg-red-500 in tailwind v4, and it is applying to the element with the classname instead of the children.

---

what you (and me) actually want to achieve is this:
https://play.tailwindcss.com/VViLZ5HuQ8 (v3 or v4)

<div class="[&>:not(:first-child)]:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

or this:
https://play.tailwindcss.com/xZoyTX2nX2 (v4)

<div class="*:not-first:bg-red-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>