Bug 293230 – Nested selectors seem to match the originating element when the parent selector contains a pseudo element

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

https://codepen.io/romainmenke/pen/ZYYNOgv

div::before {
  & {
    color: red;
  }
}

This CSS makes the containing "div" red.
While the selector should instead be invalid.

Even when valid (if allowed by the specification, which it isn't) it should match the pseudo element and not the originating element

[Radar WebKit Bug Importer]

<rdar://problem/151605806>

[Ahmad Saleem]

*** Safari Technology Preview 219 ***

Red square <--- Broken


*** Chrome Canary 138.0.7187.0 (Official Build) canary (arm64)  ***

Green square

*** Firefox Nightly 140 (20250517140417) ***

Green square

I've also opened a pull request in WPT: https://github.com/web-platform-tests/wpt/pull/52634 to cover this case.

[Matthieu Dubet]

Pull request: https://github.com/WebKit/WebKit/pull/46324

[EWS]

Committed 296144@main (78f541198890): <https://commits.webkit.org/296144@main>

Reviewed commits have been landed. Closing PR #46324 and removing active labels.

[Matthieu Dubet]

*** Bug 293548 has been marked as a duplicate of this bug. ***

[EWS]

Committed 289651.588@safari-7621-branch (346786d43be5): <https://commits.webkit.org/289651.588@safari-7621-branch>

Reviewed commits have been landed. Closing PR #3168 and removing active labels.