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

86

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

пример

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

css css-selectors Алекс
источник

Ответы:

136

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

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

Гамбо
источник
Пока что это «до» , а не «включено» в IE6 :)
Alex
Нет, IE6 неправильно понимает связанные селекторы CSS. Это правило будет применяться ко всем элементам с class = "main" независимо от того, являются ли они также class = "content"
Гарет
Иллюстрация IE6 по сравнению с другими браузерами для всех, кому небезразлично: stackoverflow.com/questions/3772290/…
BoltClock
11

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

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

Или же:

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

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

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

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

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

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

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

Уэсли Мерч
источник