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 AND 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, незалежно від будь-яких інших перелічених класів.