:matches()擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。
.contents h2,
.contents p,
.contents ul, {
margin:10px 0;
}
同じ親要素内の子にスタイルを適用しているのですが、そのまま並列して記載しており、記述が長くなってしまいがちです。
ですが、:matches()を使えば、下記のようにシンプルにまとめることができます。
:matches(.contents) :matches(h2, p, ul) {
margin:10px 0;
}
FirefoxやChromeではベンダープレフィックス対応で:any()擬似クラスを使用したほうが良いです。
:-webkit-any(.contents) {
margin:10px 0;
}
:-moz-any(.contents) {
margin:10px 0;
}








