comment puis-je sélectionner une div avec la classe "A" mais PAS avec la classe "B"?

J'ai quelques divs:comment puis-je sélectionner une div avec la classe "A" mais PAS avec la classe "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>

Est-il un sélecteur CSS qui me obtenir le div contenant Target mais pas les contenant divs NotMyTarget?

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

Edit: Jusqu'à présent, Nick est le plus proche. Il est maladroit et je n'aime pas la solution, mais au moins cela fonctionne:

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

Source

2010-03-20 MedicineMan

Votre question est un peu mal formulée. Le titre rend clair ce que vous voulez, mais le code et la question ne sont pas. La réponse directe serait: il suffit d'utiliser '# Target'. Quant à la réponse sur la question dans le titre: CSS3 a un sélecteur ': not()', mais tous les navigateurs ne le font pas encore. – BalusC

J'aime la solution de Ron DeVera est plus élégant, mais ne pouvait pas le faire fonctionner sur n'importe quel navigateur. Est-ce que les commentateurs peuvent me dire si cela fonctionne vraiment, et j'ai juste besoin de travailler sur les petits détails? (malade aujourd'hui, peu de patience pour cela) – MedicineMan

J'ai édité ma réponse pour utiliser 'background', puisque' outline' ne fonctionne pas dans les anciennes versions d'IE. (J'utilise habituellement 'outline' comme CSS de diagnostic par défaut, puisque - comme' background' - il ne modifie pas la mise en page.) Chris Lively a également aimablement ajouté un exemple de travail complet à ma réponse. –

vous pouvez utiliser le sélecteur d'attributs pour correspondre à la div qui a une seule classe:

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

Si vous voulez choisir un autre div qui a plusieurs classes, utilisez les guillemets:

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

Certains navigateurs ne prennent pas en charge la syntaxe de sélection 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 21/02/2014: Quatre ans plus tard, :not est maintenant largement disponible, si bavard dans ce cas précis:

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

Malheureusement, cela ne marche pas « T travail dans IE 7-8 comme indiqué dans la question: http://caniuse.com/#search=:not

Source

2010-03-20 03:18:52

semble très prometteur, malheureusement, je ne pouvais pas faire fonctionner cela. Peut-être que je fais quelque chose de mal ici. Les commentateurs: cela fonctionne-t-il ou non (FF, IE7, IE8, Safari)? – MedicineMan

Fonctionne bien dans FF, Ie8, safari, etc avec un doctype strict. – NotMe

La chaîne ': not()' n'aide pas non plus dans les cas où vous ne pouvez pas ou ne voulez pas identifier le nom de classe à exclure, à condition qu'il s'ajoute à 'A'. Le pari le plus sûr est donc avec un sélecteur d'attribut (tant que les espaces et les noms de classe dupliqués ne posent pas de problème). – BoltClock

Je pense que le mieux que vous pouvez faire (jusqu'à CSS 3) est remplacer les styles dans ce cas avec 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 */ }

Source

2010-03-20 01:02:41

Pourquoi inverser le style de classe A si vous ne pouvez pas inclure le style pour la classe A? – Veger

@Verger - Parce que 'class =" A B "' correspond '.A.B' et' .A' à la fois ... mais je suis un peu fatigué, il est possible que je l'ai complètement à l'envers. –

@Nick - True, mais 'class =" B "' ne correspond qu'à '.B' et il n'y a aucun besoin d'inversion :) (btw je ne savais pas sur la syntaxe '.AB', donc merci pour cela!) – Veger

.A:not(.B) {}

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

Source

2010-03-20 09:07:12 Ms2ger

": non" est CSS3. Voici le tableau de compatibilité: http://caniuse.com/#feat=css-sel3 – Elo

comment puis-je sélectionner une div avec la classe "A" mais PAS avec la classe "B"?

Répondre

Questions connexes