開発者ドキュメント

CSS:matches()疑似クラス

: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機能のサポートに関するデータ。

モバイルバージョンを終了