SafariとFirefoxのプレビュー版で:is()、:where()の新しいCSS疑似クラスが、利用できるようになりました。
そんな:is()と:where()の便利な使い方を紹介します。

目次
  1. :is()は繰り返しを減らせる
  2. :where()は詳細度を低くキープできる

:is()は繰り返しを減らせる

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

:where()は詳細度を低くキープできる

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