как выбрать div с классом "A", но НЕ с классом "B"? - PullRequest
Новая
       7

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

54 голосов
/ 20 марта 2010

У меня есть несколько divs: 

<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, но не div, содержащий NotMyTarget?

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

Редактировать: Пока Ник самый близкий. Это неуклюже, и мне не нравится решение, но, по крайней мере, оно работает: 

.A
{
   /* style that all divs will take */
}
div.B 
{
  /* style that will override style .A */
}

Ответы [ 3 ]

47 голосов
/ 20 марта 2010

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

30 голосов
/ 20 марта 2010 
.A:not(.B) {}

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

15 голосов
/ 20 марта 2010

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

.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...