Стиль CSS для элемента, который имеет класс A и класс B

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

Ответы

Ответ 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>

Ответ 2

Селектора классов могут комбинироваться:

div.a.b {
  color: red;
}

Цитата из спецификация:

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

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

p.marine.pastoral { color: green }

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

Ответ 3

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

Ответ 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>

Ответ 5

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