CSS Selector, который применяется к элементам с двумя классами

Question

Есть ли способ выбрать элемент с помощью CSS на основе значения атрибута class, установленного для двух конкретных классов.Например, допустим, у меня есть 3 div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Какой CSS я мог бы написать, чтобы выбрать ТОЛЬКО второй элемент в списке, основываясь на том факте, что он является членом обоих классов foo И bar

Answer 1

Цепочка обоих селекторов классов (без пробела между ними):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

---

Если вам все еще приходится иметь дело с древними браузерами, такими как IE6, имейте в виду, что он не читает цепочечные селекторы классовправильно: вместо этого он будет читать только селектор классов last (в данном случае .bar), независимо от того, какие другие классы вы перечислите.

Чтобы показать, как другие браузеры и IE6 интерпретируют этоОбратите внимание на следующее:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Вывод в поддерживаемых браузерах:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

Вывод в IE6:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Сноски:

• Поддерживаемые браузеры:
  1. Не выбран , так как этот элемент имеет только класс foo.
  2. Выбран , так как этот элемент имеет оба классаfoo и bar.
  3. Не выбран , поскольку этот элемент имеет только класс bar.
• IE6:
  1. Не выбран , так как этот элемент не имеет класса bar.
  2. Выбран, поскольку этот элемент имеет класс bar, независимо от других перечисленных классов.