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

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

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

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

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

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

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

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

* {
    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, независимо от других перечисленных классов.