:is()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

:is() は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

メモ: 元々は :matches() （と :any()）という名前でしたが、CSSWG issue #3258 で :is() に改名されました。

試してみましょう

擬似要素は :is() のセレクターリストでは無効です。

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

この 2 つの違いは、 :is() がセレクター全体の詳細度にカウントされる（最も詳細な引数の詳細度を取る）のに対し、 :where() は詳細度の値が 0 であることです。これは、 :where() 参照ページの例で実証されています。

セレクターの解釈の許容

仕様では :is() と :where() が省略可能なセレクターリストを受け入れることを定義しています。

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 :is() や :where() を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。

css
:is(:valid, :unsupported) {
  /* … */
}

:unsupported に対応していないブラウザーでも、正しく解釈して :valid に一致します。一方、

css
:valid,
:unsupported {
  /* … */
}

:unupported に対応していないブラウザーでは、 :valid に対応していても無視します。

例

リストセレクターの簡略化

:is() 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、

css
/* 3 層（以上）の順序なしリストに四角形を使用 */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

... これを次のように置き換えることができます。

css
/* 3層（以上）の順序なしリストに四角形を使用 */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

section セレクターの簡略化

:is() 擬似クラスは、 HTML のセクションと見出しを扱うときに特に便利です。 <section>、<article>、<aside>、<nav> は互いによく入れ子になりますので、 :is() がないと、 1 つ 1 つを選択してスタイルを適用するのが難しくなります。

例えば、 :is() を使わずに、異なる深さの h1 要素にスタイルを適用すると、とても複雑になります。

css
/* レベル 0 */
h1 {
  font-size: 30px;
}

/* レベル 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/* レベル 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/* レベル 3 */
/* ... 考えたくありません! */

:is() を使用すると、ずっと簡単になります。

css
/* レベル 0 */
h1 {
  font-size: 30px;
}
/* レベル 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* レベル 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* レベル 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

:is() は擬似要素を選択しない

:is() 擬似クラスは擬似要素にマッチしません。したがって、次のようにしたり、

css
some-element:is(::before, ::after) {
  display: block;
}

または、次のようにする代わりに、

css
:is(some-element::before, some-element::after) {
  display: block;
}

以下のようにしましょう：

css
some-element::before,
some-element::after {
  display: block;
}

構文

css
:is(<forgiving-selector-list>) {
  /* ... */
}

仕様書

Specification
Selectors Level 4
# matches-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報