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

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

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

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

Ответы

Ответ 1

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

.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] -->

Сноска:

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

  • IE6:
    • Не выбрано, так как этот элемент не имеет класса bar.
    • Выбранный, так как этот элемент имеет класс bar, независимо от других перечисленных классов.