[:has() pseudo-class] Styles matching non-matching elements on load

• Component: CSS
• Status: RESOLVED DUPLICATE

[Brandon McConnell]

Created attachment 448057 [details]
screenshot of has pseudo-class bug

Congrats on launching the :has() pseudo-class! Excited by all the possibilities this will open for styling.

One unexpected side effect I'm seeing when testing— it appears that `:has()` sometimes matches for non-matching elements. The inspector doesn't show the styles but they appear on-page. If I comment out the styles in the inspector and then un-comment them, they disappear.

 * Example URL: https://codepen.io/brandonmcconnell/pen/45b67ffa16dc41614efdd140bef1f439
 * Example screenshot attached
 * Example screen recording: https://www.loom.com/share/0cf9c18a99a8421f9957ff04c34f64de

This bug is critical to the use of `:has()` so this should be resolved before the `:has()` pseudo-class is released into the production browser.

[Brandon McConnell]

Also check example #'s at this URL (https://codepen.io/brandonmcconnell/pen/a93e58403165e721481e7fc4fe3fb676?editors=1100):
 * Example 6
 * Example 7
 * Example 8

Each shows certain matched squares that should not be matched. If you inspect those blocks in the inspector, you will see they are not actually receiving the styles but show them visually anyway.

[Bramus]

On Twitter I saw a demo pass by that showed the same faulty behavior: https://codepen.io/ZoranJambor/pen/GRMyzvy

```
a:has(span) {
  background: rebeccapurple;
  color: #fff;
}
```

Both `<a>` elements get styled, even though the 2nd `<a>` element does not contain a `<span>`.

[Antti Koivisto]

Fixed in trunk.

*** This bug has been marked as a duplicate of bug 234531 ***