【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
この記事が気に入ったらサポートをしてみませんか?