Syntax explanation for & nesting selector is confusing

[ndelafuente]

MDN URL

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

What specific section or headline is this issue about?

Syntax

What information was incorrect, unhelpful, or incomplete?

The Syntax section is a quite verbose, making it difficult to parse out the different syntaxes for the & selector at a glance. What is now the syntax section is very useful for first-time learners and would perhaps be moved to a Usage notes/guide section.

What did you expect to see?

A concise syntax section that can be quickly scanned, with minimal examples illustrating each form of & usage, while a more detailed explanation of the nuanced usage lie below in separate a "Usage notes" section.

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

• The Next-sibling combinator article does this well.
• Could also provide a demo like in the text-shadow article

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/reference/selectors/nesting_selector
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/selectors/nesting_selector/index.md
• Last commit: 33094d7
• Document last modified: 2025-12-16T15:14:26.000Z

[ndelafuente]

Happy to address this since I brought it up. I have never contributed to open source, but I am familiar with source control.