💬

複数のセレクタを1行で記述/:is()を使う

2022/06/27に公開

腹筋やってますか？　デザイナーの@yesod_yokoです。

次のセレクタは

.list > .email > .icon,
.list > .password > .icon {
    ...
}

次のように書けます。

.list > :is(.email, .password) > .icon {
    ...
}

IEを除いて大体のブラウザで対応しているため、安心して利用できます。

詳細度

The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument.

:is()の詳細度は、括弧内に記述されたセレクタの一番大きな値となります。

次のサンプルを見てください。

:is(#hoge, .fuga) {
  width: 200px;
}

.fuga {
  width: 100px;
}

.fuga は width: 100px となりそうな気もしますが、実際には width: 200px です。
:is(#hoge, .fuga) の詳細度には #hoga のものが使われているためです。

:is() を次のように書き直した場合、.fuga は #hoge の半分のサイズになります。

#hoge,
.fuga {
  width: 200px;
}

詳細度を上げたくない場合は:where()が利用できます。