css - クラス.aとクラス.bを持つ要素のCSSセレクター

Question

.aclassとclassの両方を持つ要素のスタイルを設定する必要があり.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>

Answer 1

それは完全に可能です。要素に 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>

Answer 2

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

div.a.b {
  color: red;
}

仕様からの引用：

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

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

p.marine.pastoral { color: green }

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

Answer 3

div[class~="a"][class~="b"] {
    color: #f00;
}

Answer 4

ええ、共通のクラスを使用するか、コンテンツが動的に変化する場合は JavaScript を使用してください。