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()

対応ブラウザ

  • 88
  • 88
  • 78
  • 14

ソース

:where()

対応ブラウザ

  • 88
  • 88
  • 78
  • 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() での単純なセレクタと複雑なセレクタの使用

セレクタについて詳しくは、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() が大きく異なります。特異性の詳細については、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）