: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） | ○Edge 88+ |
| Chrome | ○Chrome 88+ |
| Firefox | ○Firefox 78+ |
| Safari | ○Safari 14+ |
| iOS Safari | ○ |
| Android Chrome | ○Chrome 97+ |