Child selector + :last-of-type do not work together as expected

[tremby]

What version of Tailwind CSS are you using?

3.4.15

What build tool (or framework if it abstracts the build tool) are you using?

n/a / unknown (occurs in tailwind play)

What version of Node.js are you using?

na / unknown

What browser are you using?

Firefox

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/v4z3gZxhXm

Describe your issue

I'm putting this class on a blockquote: [&_p]:last-of-type:bg-red-500. It has paragraph children. I expect the last of those child paragraphs to have a red background.

"Test 1" shows the expected behaviour: only the last paragraph has a background colour applied.

"Test 2" shows broken behaviour: all paragraphs have the background colour applied.

Tailwind is generating this style rule:

.\[\&_p\]\:last-of-type\:bg-red-500:last-of-type p {
  ...
}

Since a child is being selected via &_p, the :last-of-type part should be after the trailing p, not after the base selector.

Actual use case: combining with :before and :after to put quotes around paragraphs of a blockquote.

It's interesting to note that if I use :after on a selector like this, that part is put in the right place. For example, in my actual use case, [&_p]:last-of-type:after:content-['”'] generates .\[\&_p\]\:last-of-type\:after\:content-\[\'”\'\]:last-of-type p::after, which you'll see has ::after in the right place, but :last-of-type in the wrong place.

[adamwathan]

Hey! This is expected behavior and documented here:

https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers

You want to write last-of-type:[&_p]:bg-red-500 instead.

I agree though that this is super unintuitive and it's one of the few major breaking changes we're making in v4.0, where the order will be left to right 👍

[tremby]

Oh! OK, thanks, and I'm glad it'll be more intuitive in the future.