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

css selectores

Question

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

/ * seleccione la etiqueta div con 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 2

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

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 3

Los selectores de clase se pueden combinar:

div.a.b {
  color: red;
}

Citando de la especificación :

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

Por ejemplo, la siguiente regla coincide con cualquier elemento P a cuyo atributo "clase" se le haya asignado una lista de valores separados por espacios que incluya "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 4

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

Answer 5

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