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

サイト構築 -CSS

Post on:2020年10月21日

sponsors

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

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

画像はツイートより

元ツイートは、こちら。

How slick :is(this CSS!?) 😏
removes the margins on all headers with a .tight class

h1.tight, h2.tight....... 🤢
:is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA

— Adam Argyle (@argyleink) October 13, 2020

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

:is(h1,h2,h3,h4,h5,h6).tight{
  margin-block: 0;
}

:is(h1,h2,h3,h4,h5,h6).tight{

margin-block: 0;

}

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

/* 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;
}