CSSの:is()関数を使用して複数のセレクタを同時に指定する方法

セレクタを複数指定します

:is()とは

複数のセレクタを同時に指定できる。

:is() の中には、要素名、クラス名、ID名を指定できるようだ。

:is()は、先頭、中間、末尾で使用できる。

:is() :is() のような使い方もあり。

.demo :is(.sec1, .sec2, #sec3, footer) p:hover {
    color: red;
}

:is()で指定したセレクタ配下のp要素の文字がhoverで赤くなる。

.sec1

.sec2

#sec3

補足

Note: :matches() は :is() に改名されました。 (CSSWG issue #3258)

昔は、:any() でもあった。

mdn

Memo.

あれもこれもと指定したいときに便利。

:is()は詳細度に貢献し、:where()は0です。以外は、:where()は同じです。

:is() :is() と並べたときがこれまた強力かも。

:not(:is(~~~)) もいける。

擬似要素は使えないが、擬似クラスは使える。

先頭に来た場合、:is()と「:」から始まるのでちょっと違和感あるかも。:rootがあるからそんなことないか。

プログラミング言語のin()みたいだね。

どこのブラウザでもけっこう対応している。