C'est valable aussi pour lui.

Question

Est-il un moyen pour sélectionner un élément en CSS basé sur la valeur de l'attribut de classe en cours de jeu à 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>

Ce CSS pourrais-je écrire pour sélectionner UNIQUEMENT le deuxième élément dans la liste, basée sur le fait que c'est un membre de l'foo ET bar classes?

Answer 1

De la chaîne à la fois des sélecteurs de classe (sans espace):

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

---

Si vous avez à traiter avec les anciens navigateurs comme IE6, sachez qu'il ne lit pas enchaîné des sélecteurs de classe correctement: il ne fera que lire le dernier sélecteur de classe (.bar dans ce cas) au lieu de cela, indépendamment de ce que les autres classes, vous de la liste.

Pour illustrer la façon dont les autres navigateurs et IE6 interpréter, considérer ce CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Sortie sur les navigateurs pris en charge:

<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. Pas sélectionné que cet élément a de la classe foo.
  2. Sélectionné en tant que cet élément a deux classes, foo et bar.
  3. Pas sélectionné que cet élément a de la classe bar.
     
     
• IE6:
  1. Pas sélectionné que cet élément n'a pas de classe bar.
  2. Sélectionné en tant que cet élément a de la classe bar, indépendamment de toutes les autres classes inscrites.

Answer 2

La accepté de réponse ne sont pas (toujours) de travail si l'une des classes est appliqué aux éléments du conteneur et non pas directement à l'élément lui-même.

Un pas exemple de travail est

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

Pour le faire fonctionner définir le CSS de cette façon (notez les espaces):

.foo.bar, .foo .bar
{
  /*your styles here*/
}