:matches()

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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です