: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; }