The & CSS nesting selector has gotchas/footguns/confusing behaviors that should be documented

[aeharding]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

This page should document the gotchas and footguns in comparison to SCSS/less/stylus etc implementations of the & selector.

CSS nesting does not behave like preprocessor nesting, and it is not intuitive for developers (and even browser vendors) in many edge cases.

What did you expect to see?

A section on gotchas. The section should include easily digestible examples of things that developers expect to work (like & inside pseudo-selectors) but don't.

Do you have any supporting links, references, or citations?

• https://stackoverflow.com/a/79206266/1319878
• https://issues.chromium.org/issues/40278599
• [css-nesting] Nesting @media inside ::after not working w3c/csswg-drafts#9153
• [css-nesting-1] Wrapping parent selectors with :is() introduces a host of problems w3c/csswg-drafts#9492
• [css-nesting] How to resolve nested CSS with pseudo elements in the parent w3c/csswg-drafts#7433
• https://stackoverflow.com/questions/78849850/media-inside-before-after-pseudo-element/78850011#78850011

Do you have anything more you want to share?

No response