感覚でやりかねない。
基本の話
こういうのがあったとして
<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()も同様。
だから、何でもかんでも楽ができるわけではないという話。
まとめ
以前仕様を調べたときに見落としてたのかもしれない。
今、書き終わってから見直したら駄目だって明言されてた。
![](https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png)
:is() - CSS: カスケーディングスタイルシート | MDN
:is() は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。
現場からは以上です。
コメント