web-dev-qa-db-ja.com

クラス.aおよびクラス.bを持つ要素のCSSセレクター

クラス.aとクラス.bの両方を持つ要素をスタイルする必要があります。どうすればいいのですか？

クラスがHTMLに表示される順序は異なる場合があります。

<style>
    div.a ? div.b {
        color:#f00;
    }
</style>
<div class="a">text not red</div>
<div class="b">text not red</div>
<div class="a b">red text</div>
<div class="b a">red text</div>
csscss-selectors
28
Raanan Avidor

それは完全に可能です。要素に2つのクラスを指定する場合（スペースなし）、つまり、ルールを適用するには両方に必要です。

div.a {
  color: blue;
}
div.b {
  color: green;
}
div.a.b {
  color: red;
}
<div class="a">
  A
</div>
<div class="b">
  B
</div>
<div class="a b">
  AB
</div>
57
bdukes

クラスセレクターは組み合わせることができます：

div.a.b {
  color: red;
}

スペック からの引用：

「クラス」値のサブセットと一致するには、各値の前に「。」を付ける必要があります。

たとえば、次のルールは、「class」属性に「pastoral」と「marine」を含むスペースで区切られた値のリストが割り当てられているすべてのPエレメントに一致します。

p.marine.pastoral { color: green }

このルールは、class="pastoral blue aqua marine"の場合は一致しますが、class="pastoral blue"の場合は一致しません。

12
Rob Kennedy
div[class~="a"][class~="b"]{
color:#f00;
}
5
Claudio

/ *クラスaとbを一緒に持つdivタグを選択します* /

 <style>
    div.a.b
    { 
         color:#f00;
    }
    </style>
    <div class="a">text not red</div>
    <div class="b">text not red</div>
    <div class="a b">red text</div>
    <div class="b a">red text</div>
0
Shoeb Ansari