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

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

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

Quel CSS pourrais-je écrire pour sélectionner UNIQUEMENT le deuxième élément de la liste, basé sur le fait qu'il est membre des deux classes foo AND bar?

Enchaînez les deux sélecteurs de classe (sans espace entre les deux):

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

Si vous devez encore gérer d'anciens navigateurs comme IE6, sachez qu'il ne lit pas correctement les sélecteurs de classe chaînés: il ne lira que le dernier sélecteur de classe ( .bardans ce cas), quelles que soient les autres classes que vous répertoriez.

Pour illustrer comment les autres navigateurs et IE6 interprètent cela, considérez ce CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

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

La 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é car cet élément n'a qu'une classefoo .
  2. Sélectionné car cet élément a à la fois des classes fooetbar .
  3. Non sélectionné car cet élément n'a qu'une classe bar.
     
     
• IE6:
  1. Non sélectionné car cet élément n'a pas de classebar .
  2. Sélectionné car cet élément a une classe bar, indépendamment des autres classes répertoriées.