Чи можете ви націлити елемент на 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або подібний)?

Так, просто зчепити їх: .content.main. Див. Селектор класів CSS .

Але зауважте, що Internet Explorer до версії 6 не підтримує кілька селекторів класів і просто вшановує останню назву класу.

Просто заради цього (я не дуже рекомендую це робити), є інший спосіб зробити це:

.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 підтримувати кілька селекторів класів, але знайшов багато таких, які дозволяють селектори атрибутів. Якщо хтось знає про якийсь із них, який працює , будь ласка, дайте мені крик у коментарях, щоб я міг позбутися цього обхідного шляху.