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。
  • エッジ: 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）