web-dev-qa-db-fra.com

comment sélectionner un div avec la classe "A" mais PAS avec la classe "B"?

J'ai quelques 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>

Existe-t-il un sélecteur CSS qui me fournira le div contenant Target mais pas les div contenant NotMyTarget?

La solution doit fonctionner sur IE7, IE8, Safari, Chrome et Firefox

Edit: Jusqu'à présent, Nick est le plus proche. C'est maladroit et je n'aime pas la solution, mais au moins ça marche:

.A
{
   /* style that all divs will take */
}
div.B 
{
  /* style that will override style .A */
}
csscss-selectors
55
MedicineMan

Vous pouvez utiliser le sélecteur d'attributs pour faire correspondre le div qui n'a qu'une seule classe:

div[class=A] {
  background: 1px solid #0f0;
}

Si vous souhaitez sélectionner un autre div qui a plusieurs classes, utilisez des guillemets:

div[class="A C"] {
  background: 1px solid #00f;
}

Certains navigateurs ne prennent pas en charge la syntaxe du sélecteur d'attributs. Comme d'habitude, "certains navigateurs" est un euphémisme pour IE 6 et plus.

Voir aussi: http://www.quirksmode.org/css/selector_attribute.html

Exemple complet: 

<!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: Quatre ans plus tard, :not est maintenant largement disponible, bien que détaillé dans ce cas spécifique:

.A:not(.B):not(.C):not(.D):not(.E) {
  border: 1px solid red;
}

Malheureusement, cela ne fonctionne pas dans IE 7–8 comme spécifié dans la question: http://caniuse.com/#search=:not

48
Ron DeVera
.A:not(.B) {}

Mais devinez qui ne supporte pas ça ... En effet, IE <= 8.

30
Ms2ger

Je pense que le mieux que vous puissiez faire (jusqu'à CSS 3) est de remplacer les styles dans ce cas par ce que vous ne voulez pas de la classe A B dans A, comme ceci:

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