Estilo CSS para un elemento que tiene clase A y clase B

Question

Necesito diseñar un elemento que tenga tanto la clase "a" como la clase "b". ¿Cómo lo hago?

El orden en que aparecen las clases en el html puede variar.

<style> 
div.a ? div.b{ 
color:#f00; 
} 
</style> 
<div class="a">text not red</div> 
<div class="b">text not red</div> 
<div class="a b">red text</div> 
<div class="b a">red text</div> 

Answer 1

Eso es totalmente posible. Si especifica dos clases en un elemento (sin espacios), eso significa que debe tener ambas para que se aplique la regla.

div.a { 
 
    color: blue; 
 
} 
 
div.b { 
 
    color: green; 
 
} 
 
div.a.b { 
 
    color: red; 
 
}

<div class="a"> 
 
    A 
 
</div> 
 
<div class="b"> 
 
    B 
 
</div> 
 
<div class="a b"> 
 
    AB 
 
</div>

Answer 2

Sí, utilizar una clase común, o por qué no, JavaScript si el contenido cambia dinámicamente

Answer 3

selectores de clase se pueden combinar:

div.a.b { 
    color: red; 
} 

Citando de the spec:

para que coincida con un subconjunto de valores "clase", cada valor debe ser precedido por un "."

Por ejemplo, la siguiente regla coincide con cualquier elemento P cuyo atributo "class" se le ha asignado una lista de valores separados por espacios que incluye "pastoral" y "marino":

p.marine.pastoral { color: green } 

Esta regla partidos cuando class="pastoral blue aqua marine" pero no coincide con class="pastoral blue".

Answer 4

div[class~="a"][class~="b"]{ 
color:#f00; 
} 

Answer 5

/* seleccione la etiqueta div con la clase A y B juntos */

<style> 
    div.a.b 
    { 
     color:#f00; 
    } 
    </style> 
    <div class="a">text not red</div> 
    <div class="b">text not red</div> 
    <div class="a b">red text</div> 
    <div class="b a">red text</div>