web-dev-qa-db-fra.com

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

J'ai besoin de styler un élément ayant à la fois la classe .a et la classe .b. Comment fait-on ça?

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>
csscss-selectors
25
Raanan Avidor

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

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>

53
bdukes

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

div.a.b {
  color: red;
}

Citant de la spécification :

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

Par exemple, la règle suivante correspond à tout élément P dont l'attribut "class" a été attribué à une liste de valeurs séparées par des espaces comprenant "pastoral" et "marine":

p.marine.pastoral { color: green }

Cette règle correspond lorsque class="pastoral blue aqua marine" mais ne correspond pas à class="pastoral blue". 

12
Rob Kennedy
div[class~="a"][class~="b"]{
color:#f00;
}
5
Claudio

/ * sélectionne la 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>
0
Shoeb Ansari