Sélecteur CSS pour un élément de classe .a et de classe .b

Question

Je dois styler un élément comportant à la fois la classe .a et la classe .b . Comment je le fais?

L'ordre d'affichage des classes dans le code HTML peut varier.

<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

C'est tout à fait possible. Si vous spécifiez deux classes sur un élément (sans espaces), cela signifie que la règle doit avoir les deux pour que la règle puisse s'appliquer.

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

Les sélecteurs de classe peuvent être combinés:

div.a.b {
  color: red;
}

Citation de la spécification :

  

Pour faire correspondre un sous-ensemble de " classe " valeurs, chaque valeur doit être précédée d'un ".".

     

Par exemple, la règle suivante correspond à tout élément P dont la " classe " Une liste de valeurs séparées par des espaces, incluant "pastoral", a été attribuée à cet attribut. et "marine":

p.marine.pastoral { color: green }

     

Cette règle s'applique lorsque class = "bleu pastoral aqua marine" , mais ne correspond pas à class = "bleu pastoral" .

Answer 3

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

Answer 4

/ * sélectionne une balise div ayant les classes a et b ensemble * /

 <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

Oui, utilisez une classe commune, ou pourquoi pas, JavaScript si le contenu change de manière dynamique