Skip to content

[css-nesting] How to resolve nested CSS with pseudo elements in the parent #7433

Closed
@romainmenke

Description

@romainmenke

first reported here : csstools/postcss-plugins#510

relevant specification parts:

https://www.w3.org/TR/css-nesting-1/#nest-selector

The nesting selector can be desugared by replacing it with the parent style rule’s selector, wrapped in an :is() selector. For example,

https://www.w3.org/TR/selectors-4/#matches-pseudo

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().

For this CSS :

.anything::before {
  @nest .something_else > & {
    color: black
  }
}

& should represent the matched element of the enclosing rule.
Which in this case is before.

This CSS :

  1. is invalid
  2. is valid but never matches
  3. matches .something_else > .anything::before
  4. matches .something_else.anything::before (or .something_else.anything :> before)

Also relevant :

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions