CSS-селектор для элемента, имеющего класс .a и класс .b

Question

Мне нужно стилизовать элемент, который имеет класс .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>

Answer 1

Это вполне возможно. Если вы указываете два класса для элемента (без пробелов), это означает, что он должен иметь оба класса для применения правила.

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

Цитирование из спецификации :

Чтобы соответствовать подмножеству значений «класса», каждому значению должен предшествовать «.».

Например, следующее правило соответствует любому элементу P, атрибуту «class» которого был присвоен список разделенных пробелами значений, который включает «pastoral» и «marine»:

p.marine.pastoral { color: green }

Это правило соответствует, когда class="pastoral blue aqua marine", но не соответствует class="pastoral blue".

Answer 3

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

Answer 4

/ * выберите тег div, имеющий класс a и b вместе * /

 <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>

Answer 5

Да, используйте общий класс или, если нет, JavaScript, если содержимое изменяется динамически