css - セレクターの共通部分を繰り返す必要がありますか、それとももっと良い方法がありますか?

Question

次のようなもの（のようなもの||）が欲しい：

[.pw-each-placecomment or .pw-each-usercomment] h2 { }

これは可能ですか？

score 2 · Accepted Answer

現在、プレーンな CSS ではありません。Firefox は非標準のを導入しました:any()が、これは実験的なものであり、Firefox、Chrome、および Safari でのみ使用できます。となる場合もあります:matches()ので、注意してください。

SASS、Stylus、LESS などの CSS プリプロセッサを使用しないと、運が悪くなります。

両方をリストする必要があります。

.pw-each-placecomment h2,
.pw-each-usercomment h2 {

}

score -1 · Accepted Answer

属性セレクターを使用できます。

^ (カラット) 記号は文字列の始まりを示します (ここではクラス名の始まり):

div[class^="pw-each-"] h2 {  
   color: red;  
}

これにより、「pw-each-」で始まるクラス名を持つ祖先 div を持つ任意の h2 要素が選択されます。

例: pw-each- placecommentと pw-each-usercomment - 一致します... しかし

pw-other-other または other-pw-each-placecomment- はしません。

このセレクター (および一般的なセレクター) の詳細については、この記事をお勧めします。

2 に答える 2