Selector de CSS para un elemento que tiene clase .ay clase .b

Question

Necesito diseñar un elemento que tenga la clase .a y 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 completamente 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

Los selectores de clase se pueden combinar:

div.a.b {
  color: red;
}

Cotización de la especificación :

  

Para hacer coincidir un subconjunto de " clase " valores, cada valor debe ir precedido por un ". " ;.

     

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

p.marine.pastoral { color: green }

     

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

Answer 3

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

Answer 4

/ * selecciona la etiqueta div que tiene clase a y b juntas * /

 <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>

Answer 5

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