[css-nesting-1] Clarify valid position of & in a selector

[cdoublev]

CSS Nesting does not clearly define where & is allowed to appear in a selector. In Chrome/FF, these selectors are all invalid:

• html|&
• html&|*
• #&id
• .&class
• [&]
• [attr=&]
• [attr=value &]

While the position of & does not make a difference in its behavior, it should only match <type-selector> and <subclass-selector> in <compound-selector>.

---

I would also like to suggest to define this again (cf. #7503):

An invalid selector remains invalid when some of its parts are nested.

In Chrome/FF, the nested rule in ::before, div { &:first-child {} } is valid whereas the version without nesting, ::before:first-child, div:first-child {} is not (because :first-child is not allowed to be compounded to ::before).

[romainmenke]

none of this is invalid:

• ::before, div
• &:first-child

The ::before:first-child branch (with selector as if resolved) can not match anything, but it isn't invalid in a way that it would also cause the div:first-child branch to become invalid.

[cdoublev]

Indeed, they could be validated without considering the selector of the parent style rule. This is not specified.

I would not mind if it was. It may be surprising that ::before:first-child, div:first-child {} is entirely ignored, whereas the nested version is not.

This is slighlty unrelated to my original question though. Maybe I should create a dedicated one.

[tabatkins]

It does indeed clearly define where it's valid - it's a new type of selector (by implication, a new "simple" selector). The valid positions are thus defined by the grammar.

None of the options you listed are places where you can put a selector.

[tabatkins]

In Chrome/FF, the nested rule in ::before, div { &:first-child {} } is valid whereas the version without nesting, ::before:first-child, div:first-child {} is not

That's also correct behavior. We don't "expand" the & in a nested selector, it just represents the elements matched by the parent selector. It doesn't represent pseudo-elements, so in this example it ends up matching the divs on the page. That's perfectly fine.