father - parent selector css
¿Cómo selecciono un div con clase "A" pero NO con clase "B"? (3)
Tengo algunos 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>
¿Hay un selector de CSS que me proporcione el div que contiene Target pero no los que contienen NotMyTarget ?
La solución debe funcionar en IE7, IE8, Safari, Chrome y Firefox
Edit: Hasta ahora Nick es el más cercano. Es torpe y no me gusta la solución, pero al menos funciona:
.A
{
/* style that all divs will take */
}
div.B
{
/* style that will override style .A */
}
Creo que lo mejor que puedes hacer (hasta que CSS 3) es anular los estilos en este caso con lo que no quieres de la clase AB en A , como esto:
.A.B { /* Styles */ }
.A { /* Reverse any styling you don''t want */ }
Puede usar el selector de atributos para hacer coincidir el div que tiene solo una clase:
div[class=A] {
background: 1px solid #0f0;
}
Si desea seleccionar otro div que tenga varias clases, use comillas:
div[class="A C"] {
background: 1px solid #00f;
}
Algunos navegadores no admiten la sintaxis del selector de atributos. Como de costumbre, "algunos navegadores" es un eufemismo para IE 6 y versiones anteriores.
Consulte también: http://www.quirksmode.org/css/selector_attribute.html
Ejemplo completo:
<!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>
EDICIÓN 2014-02-21: Cuatro años después, :not está disponible en la actualidad, aunque sí lo es en este caso específico:
.A:not(.B):not(.C):not(.D):not(.E) {
border: 1px solid red;
}
Desafortunadamente, esto no funciona en IE 7–8 como se especifica en la pregunta: http://caniuse.com/#search=:not
.A:not(.B) {}
Pero adivina quién no admite eso ... De hecho, IE <= 8.