web-dev-qa-db-fra.com

Sélecteur CSS qui s'applique aux éléments à 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 divs:

<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, en raison du fait qu'il est membre des deux classes foo AND bar?

csscss-selectors
420
Adam

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

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

Si vous devez encore traiter avec 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 sélecteur de classe last (.bar dans ce cas ) à la place, quelles que soient les autres classes que vous listez.

Pour illustrer la façon dont les autres navigateurs et IE6 interprètent cela, considérons 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 que la classe foo.
    2. Sélectionné car cet élément a les deux classes foo et bar.
    3. Non sélectionné car cet élément n'a que la classe bar.

  • IE6:
    1. Non sélectionné car cet élément n'a pas la classe bar.
    2. Sélectionné car cet élément a la classe bar, quelles que soient les autres classes répertoriées.
664
BoltClock