Как выбрать div с классом "А", но НЕ с классом "В"?

Есть ли селектор CSS, который получит мне div, содержащий Target, но не divs, содержащий NotMyTarget?

Решение должно работать на IE7, IE8, Safari, Chrome и Firefox.

Изменить: До сих пор Ник близок. Это неуклюже, и мне не нравится решение, но по крайней мере оно работает:

Ответы

Ответ 1

Вы можете использовать селектор атрибутов для соответствия 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

Ответ 2

.A:not(.B) {}

Но угадайте, кто не поддерживает это... Действительно, IE <= 8.

Ответ 3

Я думаю, что лучшее, что вы можете сделать (до тех пор, пока CSS 3) не переопределит стили в этом случае тем, чего вы не хотите от класса A B в A, например:

.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }