擬似クラス: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
