как выбрать div с классом "A", но не с классом"B"?

Question

как выбрать div с классом "A", но не с классом"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, который даст мне div, содержащий Target но не дивы, содержащие NotMyTarget?

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

Edit: до сих пор Ник является самым близким. Он корявый и мне не нравится решение, но по крайней мере это работает:

.A

{

   /* style that all divs will take */

}

div.B 

{

  /* style that will override style .A */

}

624 3

css css-selectors

3 ответов:

Comments

Ничего не найдено.

Ron DeVera · Accepted Answer · 2014-02-22 08:51:21

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

Ms2ger · Accepted Answer · 2010-03-20 11:07:12

.A:not(.B) {}
но угадайте, кто не поддерживает это... Действительно, IE

Nick Craver · Accepted Answer · 2010-03-20 03:02:41

Я думаю, что лучшее, что вы можете сделать (до CSS 3), это переопределить стили в этом случае с тем, что вы не хотите от класса A B in A, например:
.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }