CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利
Post on:2020年10月21日
sponsors
CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。
:is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。
画像はツイートより
元ツイートは、こちら。
How slick :is(this CSS!?) 😏
removes the margins on all headers with a.tightclassh1.tight, h2.tight....... 🤢
:is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA— Adam Argyle (@argyleink) October 13, 2020
ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。
|
1 2 3 |
:is(h1,h2,h3,h4,h5,h6).tight{ margin-block: 0; } |
:is()は、複数のセレクタを1つにまとめられる疑似クラス関数です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* BEFORE */ h1.tight, h2.tight, h3.tight, h4.tight, h5.tight, h6.tight{ margin-block: 0; } /* AFTER */ :is(h1,h2,h3,h4,h5,h6).tight{ margin-block: 0; } |
:is()の詳細度はセレクタの引数によって決まります。
詳しくは、以前の記事をご覧ください。
2020年10月現在、:is()のサポートブラウザは下記の通りです。
Chromeではchrome://flags/の実験的な機能として利用できます。下記をChormeのアドレスバーに入力し、「Enabled」をチェックすると動作します。
chrome://flags/#enable-experimental-web-platform-features
Chrome 実験的な機能
Chromeで:is()を利用できるかは、下記ページで確認できます。見出しが交互にピンクになっていたら、OKです。
See the Pen
:is(h1,h2,h3,h4,h5,h6).tight {} by Adam Argyle (@argyleink)
on CodePen.
sponsors
