: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+ |