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


472

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?

Réponses:


735

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.

3
Est-ce que l'ordre dans lequel je les ai mis est important?
Adam

3
Ça n'a pas d'importance. (Il le sera pour IE6 en raison de la façon dont il l'interprète, en supposant que vous devez le prendre en charge.)
BoltClock

6
Est-il important qu'il n'y ait pas d'espace entre eux?
CodyBugstein

26
@Imray: Oui, l'espace représente un sélecteur descendant, ce qui ferait que chaque sélecteur de classe représente un élément différent. Mais nous parlons ici d'un seul élément.
BoltClock

2
@ David Brossard: Oui, c'est le cas.
BoltClock
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.