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

Question

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

Пример

<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 или аналогичный)?

Answer 1

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

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

Answer 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 для выбора атрибутов, и это уродливо, но работает.

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