[css-nesting-1] Behavior of nesting within pseudo element selectors

[sesse]

What is the correct behavior of this?

<style>
div::before {
  & {
    content: "test";
  }
}
</style>
<div>xyz</div>

FWIW, my preferred resolution would be “inner rule matches nothing”, since pseudo element selectors are not allowed within :is() and & is generally defined in terms of :is(), but the spec is not clear on this (it doesn't define & as exactly equivalent to :is(), just that it matches the elements of the parent rule and has the same specificity).

The other two alternatives would be either parse error (difficult when taking CSSOM into account) or that it actually would be equivalent with writing out div::before (problematic when combining & with further selectors).

[lilles]

See issue #7346 for allowing pseudo element combinators that would most likely require us to have support for pseudo elements inside :is() in general.

[romainmenke]

related :

• [css-nesting] How to resolve nested CSS with pseudo elements in the parent #7433
• [css-nesting-1] Invalid nested selectors #7503

[sesse]

It's much the same as #7433, yes (could perhaps even be closed as a duplicate). It seems the consensus is “valid but never matches”, and anything else is going to be a quagmire of complexity, so that's what I will be implementing.

[johannesodland]

From an authors perspective, I'd expect the following to work. I'd be surprised if nested conditionals didn't work in pseudo-elements, but everywhere else.

div::before {
  content: "test A";
  @media (min-width: 480px) {
    content: "test B";
  }
}

This should be equivalent to

div::before {
  content: "test A";
  @media (min-width: 480px) {
    & {
      content: "test B";
    }
  }
}

Which again should be equivalent to

div::before {
  content: "test A";
}

@media (min-width: 480px) {
  div::before {
    content: "test B";
  } 
}

As an extension it would be hard to understand why this didn't match, although I can't think of a reason to write this without conditional nesting.

div::before {
  & {
    content: "test";
  }
}

I'd expect it being equivalent to

div::before {
  content: "test";
}

[sesse]

I understand the simple cases are desirable; the question is what happens when you get to more complex things? We need to define something that either makes sense for everything, or is very clear about what specific cases work. E.g.

div::before {
  &::after {
    content: "test"
  }
}

or

div::part(x) {
    &.foo {
       color: red;
    }
}

There are lots and lots of these; Blink alone supports 124 different pseudo-selectors now (of which about 40 are pseudo-elements), and I guess there are still relevant ones defined that we don't support. They can be combined in a myriad of different ways. Can we find something that is reasonable for all of them? If we special-case a few, will we remember to go back and revise the nesting spec when new ones are added?

[tabatkins]

Yup, dupe of #7433 .