:matches()

2018.03.16

:matches()擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。

.contents h2,
.contents p,
.contents ul, {
　　margin:10px 0;
}

同じ親要素内の子にスタイルを適用しているのですが、そのまま並列して記載しており、記述が長くなってしまいがちです。
ですが、:matches()を使えば、下記のようにシンプルにまとめることができます。

:matches(.contents) :matches(h2, p, ul) {
　　margin:10px 0;
}

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

:-webkit-any(.contents) {

　　margin:10px 0;

}

:-moz-any(.contents) {

　　margin:10px 0;

}

この記事を見た人は次の記事も見ています。

フォントサイズをjQueryを使って変更

カテゴリ名をリンク付きでリスト表示する WordPressタグ

:matches()

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

wpのevents-managerプラグインで予約数に応じて表示を変更する

第四十九回「初心者から始めるSEO対策」

CSSで三角形を作成する

スマホ表示時にタップで電話番号をかけれるようにする。

WordPressの投稿プレビューのURLを変更する

WEB広告の話(Google広告編②)