[css]:is()に疑似要素は入れられないという話

感覚でやりかねない。

基本の話

こういうのがあったとして

<div class="sample">
    <div class="alpha"></div>
    <div class="beta"></div>
</div>

子要素にまとめてstyleを付けたい場合、こうする。

.sample :is(.alpha,.beta){
    ︙
}

こうしなくていいので文字数を減らせて便利。

.sample .alpha,
.sample .beta{
    ︙
}

個人的には記事中のタグをまとめてどうのこうの、みたいなときに助かってる。

article :is(h2,h3,h4,h5,h6){
    margin: 2em 0;
}

また、こういうのがあったとする。

<div class="sample alpha"></div>
<div class="sample beta"></div>

こうやってまとめられる。

.sample:is(.alpha,.beta){
    ︙
}

こういうのがある。

.sample::before,
.sample::after{
    ︙
}

例に倣えばこうしたいところだけど、動かない。

.sample:is(::before,::after){
    ︙
}

:where()も同様。

だから、何でもかんでも楽ができるわけではないという話。

以前仕様を調べたときに見落としてたのかもしれない。

今、書き終わってから見直したら駄目だって明言されてた。

現場からは以上です。