как я выбираю отделение с классом, но НЕ с классом "B"?
У меня есть некоторые отделения:
<div class="A">"Target"</div>
<div class="A B">"NotMyTarget"</div>
<div class="A C">"NotMyTarget"</div>
<div class="A D">"NotMyTarget"</div>
<div class="A E">"NotMyTarget"</div>
Есть ли селектор CSS, который получит меня отделение, содержащее Target но не отделения, содержащие NotMyTarget?
Решение должно работать над IE7, IE8, Safari, Chrome и Firefox
Править: До сих пор Nick является самым близким. Это неуклюже, и мне не нравится решение, но по крайней мере это работает:
.A
{
/* style that all divs will take */
}
div.B
{
/* style that will override style .A */
}
3 ответа
Вы можете использовать селектор атрибутов, чтобы подобрать div, имеющий только один класс:
div[class=A] {
background: 1px solid #0f0;
}
Если вы хотите выбрать другой div, имеющий несколько классов, используйте кавычки:
div[class="A C"] {
background: 1px solid #00f;
}
Некоторые браузеры не поддерживают синтаксис селектора атрибутов. Как обычно, "некоторые браузеры" - это эвфемизм для IE 6 и старше.
См. также: http://www.quirksmode.org/css/selector_attribute.html
Полный пример:
<!DOCTYPE html>
<html>
<head>
<style>
.A { font-size:22px; }
.B { font-weight: bold; border: 1px solid blue; }
.C { color: green; }
div[class="A"] {
border: 1px solid red;
}
div[class="A B"] {
border: 3px solid green;
}
</style>
</head>
<body>
<div class="A">"Target"</div>
<div class="A B">"NotMyTarget"</div>
<div class="A C">"NotMyTarget"</div>
<div class="A D">"NotMyTarget"</div>
<div class="A E">"NotMyTarget"</div>
</body>
</html>
EDIT 2014-02-21: Четыре года спустя, :not теперь широко доступен, хотя и многословен в этом конкретном случае:
.A:not(.B):not(.C):not(.D):not(.E) {
border: 1px solid red;
}
К сожалению, это не работает в IE 7-8, как указано в вопросе: http://caniuse.com/#search=:not
.A:not(.B) {}
Но угадайте, кто не поддерживает это... Действительно, IE<=8.
Я думаю, лучшее, что вы можете сделать (до CSS 3), - это переопределить стили в этом случае тем, что вам не нужно из класса AB в A , например:
.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }