Sélecteur CSS qui s'applique aux éléments avec deux classes

Question

Existe-t-il un moyen de sélectionner un élément avec CSS en fonction de la valeur de l'attribut de classe défini sur deux classes spécifiques. Par exemple, disons que j'ai 3 divs:

<div class="foo">Hello Foo</div> 
<div class="foo bar">Hello World</div> 
<div class="bar">Hello Bar</div> 

Que CSS pourrais-je écrire pour sélectionner seulement le deuxième élément dans la liste, sur la base du fait qu'il est membre des deux classes de foo et bar?

Answer 1

chaîne deux sélecteurs de classe (sans espace entre les deux):

.foo.bar { 
    /* Styles for element(s) with foo AND bar classes */ 
} 

---

Si vous avez encore à traiter avec les navigateurs anciens comme IE6, sachez qu'il ne lit pas les sélecteurs de classe chaînés correctement : il ne lira que le dernier sélecteur de classe (.bar dans ce cas), indépendamment des autres classes que vous listerez.

Pour illustrer comment les autres navigateurs et IE6 interpréter, considérons ce CSS:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

sortie sur les navigateurs pris en charge est:

<div class="foo">Hello Foo</div>  <!-- Not selected, black text [1] --> 
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] --> 
<div class="bar">Hello Bar</div>  <!-- Not selected, black text [3] --> 

sortie sur IE6 est:

<div class="foo">Hello Foo</div>  <!-- Not selected, black text [1] --> 
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] --> 
<div class="bar">Hello Bar</div>  <!-- Selected, red text [2] --> 

Notes de bas de page:

• Navigateurs pris en charge:
  1. Non sélectionné que cet élément n'a qu'une classe foo.
  2. Sélectionné car cet élément a les deux classes foo et bar.
  3. Non sélectionné car cet élément a seulement la classe bar.
     
     
• IE6:
  1. Non sélectionné que cet élément n'a pas classe bar.
  2. Sélectionné comme cet élément a la classe bar, indépendamment des autres classes répertoriées.