CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利

CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。

:is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。

CSSの新しい疑似クラス関数「:is()」

画像はツイートより

元ツイートは、こちら。

ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。

:is()は、複数のセレクタを1つにまとめられる疑似クラス関数です。

:is()詳細度はセレクタの引数によって決まります。
詳しくは、以前の記事をご覧ください。

2020年10月現在、:is()のサポートブラウザは下記の通りです。

サイトのキャプチャ

:is()のサポートブラウザ

Chromeではchrome://flags/の実験的な機能として利用できます。下記をChormeのアドレスバーに入力し、「Enabled」をチェックすると動作します。
chrome://flags/#enable-experimental-web-platform-features

Chrome 実験的な機能

Chrome 実験的な機能

Chromeで:is()を利用できるかは、下記ページで確認できます。見出しが交互にピンクになっていたら、OKです。

See the Pen
:is(h1,h2,h3,h4,h5,h6).tight {}
by Adam Argyle (@argyleink)
on CodePen.

sponsors

top of page

©2020 coliss