CSS:matches()疑似クラス
提供:Dev Guides
:matches()は、セレクターをグループ化することで時間を節約できる新しいCSS疑似クラスです。
:matches(article, div.section, section) h2 { font-size: 3em; } /* Is this equivalent of this: */ article h2, div.section h2, section h2 { font-size: 3em; }
ポイントを持ち帰る別の例を次に示します。
:matches(.main, p, div.my-stuff) :matches(h1, h2, h3, h4) { border: 2px dotted rgba(255,134,34,0.5); } /* Is this equivalent of this: */ .main h1, .main h2, .main h3, .main h4, p h1, p h2, p h3, p h4, div.my-stuff h1, div.my-stuff h2, div.my-stuff h3, div.my-stuff h4 { border: 2px dotted rgba(255,134,34,0.5); }
この2番目の例では、これらすべてを入力することで多くの時間を節約できました。 これは、CSSファイルを小さくするのにも役立ちます。
ブラウザのサポート
👉Mythは、今日:matches()の使用を開始するための良いオプションです。
css-matches-pseudoを使用できますか? caniuse.comの主要なブラウザーでのcss-matches-pseudo機能のサポートに関するデータ。