【CSS】新しい擬似クラス:is()の使い方

擬似クラス:is()が主要ブラウザでサポートされていたので、使い方のメモです。

1. :is()とは

複数のセレクタを、簡潔に1つにまとめて書くことができる擬似クラスです。

2.書き方

▼サンプル1

/*クラスtitleが指定された<h1>–<h6>の見出し要素のフォントの太さをboldにする*/
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title {
	font-weight: bold;
}

:is()を使用すると...

/*クラスtitleが指定された<h1>–<h6>の見出し要素のフォントの太さをboldにする*/
:is(h1,h2,h3,h4,h5,h6).title{
	color: #000;
}

▼サンプル2

/*section要素、article要素の<h1>–<h6>の見出し要素のテキストの色を黒にする*/
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6 {
	color: #000;
}

:is()を使用すると...

/*section要素、article要素の<h1>–<h6>の見出し要素のテキストの色を黒にする*/
:is(section,article) :is(h1,h2,h3,h4,h5,h6){
	color: #000;
}

煩雑になったcssがわかりやすくスッキリされました！

3.対応ブラウザ

主要ブラウザでサポートされています。（2022年2月28日現在）

▼擬似クラス:is()のサポート状況 | Can I use
https://caniuse.com/?search=is

4.参考サイト

こちらの記事を参考にさせていただきました。
▼:is() (:matches(), :any()) | :is() (:matches(), :any()) - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:is