Chaining a pseudo-class after the '::picker' pseudo-element is not allowed.

[FlorianBoe]

I experimented with the customizable select elements and noticed that chaining pseudo-classes after the ::picker pseudo-element is currently not allowed in lightningcss.

An example would be the :not() CSS pseudo-class, like:

select::picker(select):not(:popover-open) {}

This code throws the following syntax error:
SyntaxError: Invalid pseudo class after pseudo element, only user action pseudo classes (e.g. :hover, :active) are allowed.

[devongovett]

I don't see anything in the spec that says this is valid, and it violates the usual rules of CSS. Looks like there is still some debate about it here, but I'm not sure what the current resolution is. w3c/csswg-drafts#10775

[FlorianBoe]

Thanks for taking the time to look it up in the spec and to find this spec issue!

It's possible that I interpreted it as standard compliant, given that it works in Chrome and I discovered this syntax and a demo by Adam Argyle.
https://codepen.io/editor/ArgyleInk/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1 (it's used for an entry animation using @starting-style in select/select.css).

Feel free to close the issue as resolved.

[wherewhere]

If this is invalid, how can I select ::picker(select):popover-open?

I see, use :open::picker(select)

[FlorianBoe]

If you read the issue you find this part:

The behavior Chromium implements falls out of that, which is select:open matching and ::picker(select):popover-open matching as well.

So use select:open as an alternative until this issue is resolved.