Как применить CSS к элементам, которые имеют несколько классов?

Question

Есть ли способ применить стиль к элементам, которые содержат несколько классов?

Пример

---

<div class="foo"     > foo     </div>
<div class="foo bar" > foo bar </div>
<div class="bar"     > bar     </div>

---

Я хочу изменить только стили элемента, который содержит класс "foo bar". Информация XPath будет выглядеть примерно так: //div[contains(@class,"foo") and contains(@class,"bar")]. Любые идеи для чистого CSS, без создания уникального класса?

Answer 1

Как это:

.foo { background: red; }
.bar { background: blue; }
.foo.bar { background: purple; }

Answer 2

* Решения 1001 * .foo.bar { ... } [class="foo bar"] { ... } // explicit class name [class~="foo"][class~="bar"] { ... } // inclusive class name