疑似要素あたりの文法が変わった件

　この記事に関連して、カスタマイザブル・セレクトを触っていて気付いたことを書きます。

概要

　「疑似要素はセレクタの最後でなくてはいけない」というCSSの文法が変わった。

詳細

　概要でだいたい話は終わっているのですが。MDNでもCSS2.2でもCSS Selectors Level 3でも「疑似要素はセレクタの最後でなくてはいけない」となっています。Noteで変更可能性についての言及はあるものの。

擬似要素が現れる場所は、それが現れる複雑セレクターまたは複合セレクター内の他のすべての要素の後でなければなりません。
擬似要素 - CSS | MDN

A pseudo-element must appear after all the other components in the complex or compound selector.
Pseudo-elements - CSS | MDN

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.
Selectors

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.
Selectors Level 3

　つまり、::before:first-lineや::before:hoverみたいな記述はできませんでした（もちろん、::before::beforeも）。

　ところが、カスタマイザブル・セレクトでは::picker(select):popover-openと書くことがあり、これは疑似要素の後ろに疑似クラスが来ています。
　えーいつからだろう、と思ったので、調べました。

2018年の仕様から

A pseudo-element may be immediately followed by any combination of the user action pseudo-classes
Selectors Level 4

勝手訳：疑似要素は、いずれのユーザーアクション疑似クラスの組み合わせが直後に続いてもよい。

　2018年って、そんなに前ならMDN直しといてよ……

テストしてみた

　user action pseudo-classesに:hoverが含まれているようだったので、テストしてみました。

<style>
    p::before {
        content: "::before"
    }


    p:hover::before {
        color: red;
    }

    p::before:hover {
        background-color: blue;
    }
</style>
<p>test</p>

　Chrome143で動作しませんでした。Chromeで動作しないなら、まあないものと思った方がいいですね。
　つーか、Chrome、おまえ、::picker(select):popover-openだけ対応したんか……