Можете ли вы настроить элемент с помощью CSS только в том случае, если присутствуют 2 класса?

Как вы, наверное, уже знаете, у вас может быть несколько классов по элементам, разделенным пробелом.

Пример

<div class="content main"></div>

И с помощью CSS вы можете настроить таргетинг div на .content или .main. Есть ли способ настроить таргетинг на него, если и только если присутствуют оба класса?

Пример

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Какой CSS-селектор я использовал бы, чтобы получить только первый div (предположим, что я не могу использовать .content:first-child или подобное)?

Ответ 1

Да, просто соедините их: .content.main. См. Селектор классов CSS.

Но учтите, что Internet Explorer до версии 6 не поддерживает несколько селекторов классов и просто отличает последнее имя класса.

Ответ 2

Просто ради этого (я действительно не рекомендую вам это делать), есть еще один способ сделать это:

.content[class~="main"] {}

Или:

.main[class~="content"] {}

Ссылка: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "warning" ] Соответствует любому элементу E, значение атрибута "foo" список разделенных пробелами значений, один из которых в точности равен "Предупреждение"

Демо: http://jsfiddle.net/eXrSg/

Почему это действительно полезно (по крайней мере для IE6):

Поскольку IE6 не поддерживает несколько классов, мы не можем использовать .content.main, , но существуют некоторые библиотеки javascript, такие как IE-7.js, которые активируют селектор атрибутов, но все равно кажутся неудачными, когда речь идет о нескольких классах. Я проверил это обходное решение в IE6 с javascript, позволяющим селектор атрибутов, и он уродлив, но он работает.

Мне еще предстоит найти script, который заставляет IE6 поддерживать несколько селекторов классов, но нашел множество, которые позволяют селекторам атрибутов. Если кто-то знает о том, что работает, пожалуйста, дайте мне крик в комментариях, чтобы я мог избавиться от этого обходного пути.