:is()複数のセレクタを引数でまとめて記述する

:is() 疑似クラスは、引数としてセレクタを指定することが可能な疑似クラスです。引数として複数のセレクタをまとめて記述することで、その中のいずれか 1つに当てはまる要素にマッチさせることができます。

過去には :any():matches() 疑似クラスとして仕様策定が進んでいたものですが、:is() に名称変更されています(参考: [selectors-4] Rename :matches() to :is() - Issue #3258 - w3c/csswg-drafts)。

Chromeにおいては、非標準の名前 -webkit-any() にて、Safari においては、同様に非標準の名前、:matches()、および -webkit-any() として実装されていますが利用は非推奨です。また、-webkit-any() は複数セレクタの組み合わせを引数に指定する記述(-webkit-any(div.example, section.example) {...} のような)には対応していません。

詳細説明

複数のセレクタを 1つの宣言ブロックに対して使用する場合、「,」(カンマ)区切りで記述するのが通常ですが、:is() 疑似クラスを使用することで、同様の指定をコンパクトにまとめることが可能です。

従来の記述例

div p,
section p,
article p,
aside p {
  font-size: 1rem;
}

:is() 疑似クラスを使用した記述例

:is(div, section, article, aside) p {
  font-size: 1rem;
}

:is()のサンプルソース

:is(div, section, article, aside) p {
  font-size: 1rem;
}
:is(div, section, article, aside) a:is(:hover, :focus)  {
  color: red;
}

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium) ×
Chrome ×
Firefox
Safari ×
iOS Safari ×
Android Chrome ×

仕様書

Selectors Level 4

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

@-規則
メディアクエリ
セレクタ
疑似要素
疑似クラス
CSS関数
背景

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ