CSS の新しい機能疑似クラス セレクタ :is() および :where()

CSS セレクタ構文に追加されたこれらの小さな変更は、大きな影響を与えます。

Adam Argyle

CSS を記述するときに、同じスタイルルールで複数の要素をターゲットとする長いセレクタリストになることがあります。たとえば、ヘッダー要素内に見つかった <b> タグの色を調整するには、次のように記述します。

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

代わりに、:is() を使用して、長いセレクタを回避しながら読みやすさを向上させることができます。

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

読みやすさとセレクタの短縮は、:is() と :where() が CSS にもたらす価値のほんの一部にすぎません。この投稿では、これらの 2 つの機能的な疑似セレクタの構文と値について説明します。

:is() の使用前後の無限ループのビジュアル

ブラウザの互換性

:is()

対応ブラウザ

  • Chrome: 88。
  • Edge: 88.
  • Firefox: 78。
  • Safari: 14。

ソース

:where()

対応ブラウザ

  • Chrome: 88。
  • Edge: 88.
  • Firefox: 78。
  • Safari: 14。

ソース

:is() と :where() のミーティング

これらは機能的な疑似クラス セレクタです。末尾の () と先頭の : に注目してください。これらは、要素に一致するランタイムの動的関数呼び出しと考えてください。CSS の記述時に、セレクタの中央、先頭、末尾で要素をグループ化できます。また、特定度を変更して、特定度を無効にしたり、特定度を上げたりすることもできます。

セレクタのグループ化

:is() がグループ化に関してできることはすべて、:where() でも可能です。これには、セレクタ内の任意の場所で使用すること、ネストすること、スタックすることが含まれます。使い慣れた CSS の柔軟性をフルに活用できます。次に例を示します。

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

上記のセレクタの例は、これらの 2 つの機能的な疑似クラスの柔軟性を示しています。:is() または :where() のメリットが得られるコード領域を見つけるには、複数のコンマとセレクタの繰り返しを含むセレクタを探します。

:is() でシンプルなセレクタと複雑なセレクタを使用する

セレクタについて復習するには、Learn CSS のセレクタ モジュールをご覧ください。以下に、この機能の例として、簡単なセレクタと複雑なセレクタの例を示します。

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

現時点では、:is() と :where() は構文上互換性があります。では、それぞれの違いを見てみましょう。

:is() と :where() の違い

特異性に関しては、:is() と :where() は大きく異なります。特定度について詳しくは、Learn CSS の特定度モジュールをご覧ください。

つまり

  • :where() には特異性がありません。
    :where() は、関数パラメータとして渡されたセレクタリスト内のすべての特異性を圧縮します。これは、この種のセレクタ機能としては初めてのものです。
  • :is() は、最も具体的なセレクタの特定度を取得します。
    :is(a,div,#id) の ID の特定度スコアは 100 ポイントです。

リストから最も特定度の高いセレクタを選択するのは、グループ化に夢中になっているときにのみ問題になります。読みやすさを改善するには、影響が少ない独自のセレクタに、特定度の高いセレクタを移動します。次に例を示します。

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where() では、ライブラリが特定のないバージョンを提供することを期待しています。作成者のスタイルとライブラリ スタイルの間で競合する特定性がなくなる可能性があります。CSS の記述時に競合する詳細度はありません。CSS では、このようなグループ化機能の開発に長い間取り組んできました。この機能はすでに利用可能になっていますが、まだほとんど未開の領域です。スタイルシートを小さくしてカンマを削除する作業を楽しんでください。

写真提供: Markus Winkler（Unsplash）