:is()、:where()疑似クラス

:is()疑似クラス

:is()疑似クラスを使用すると、セレクタの繰り返しを減らせる。

/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}
/* AFTER */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}

:where()疑似クラス

:where()疑似クラスの構文と機能は、:is()と同じ。唯一の違いは、:where()はセレクタ全体の詳細度を高めないため、スタイルを上書きする時に役立つ。

:where()疑似クラスもその引数も、セレクタの詳細度には影響しません。その詳細度は常に0です。

/* sanitize.css */
svg:where(:not([fill])) {
  fill: currentColor;
}
/* author stylesheet */
.share-icon {
  fill: blue; /* 詳細度がより高いため、上書きされる */
}

【参考】
https://coliss.com/articles/build-websites/operation/css/css-new-pseudo-classes-is-and-where.html

inserted by FC2 system