web-dev-qa-db-fra.com

Éléments cibles avec plusieurs classes, dans une règle

J'ai du HTML qui aurait des éléments avec plusieurs classes et je dois les assigner dans une seule règle, de sorte que les mêmes classes puissent être différentes dans différents conteneurs. Dites que j'ai ceci dans mon CSS:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Ensuite, j'ai ceci dans mon HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Puis-je les cibler dans une seule règle? Comme ceci, par exemple, qui, je le sais, ne fonctionne pas:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}
cssclasstarget
100
Tanner Ottinger

.border-blue.background { ... } est pour un élément avec plusieurs classes.
.border-blue, .background { ... } est destiné à plusieurs éléments, chacun avec sa propre classe.
.border-blue .background { ... } est pour un élément où '.background' est l'enfant de '.border-blue'.

Voir réponse de Chris pour une explication plus complète.

155
Vian Esterhuizen

Juste au cas où quelqu'un trébucherait comme je l'ai fait et ne s'en rend pas compte, les deux variantes ci-dessus sont destinées à des cas d'utilisation différents.

Le suivant:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

est utile lorsque vous souhaitez ajouter des styles aux éléments ayant la classe blue-border ou background, par exemple:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

aurait tous une bordure bleue et un fond blanc appliqué à eux.

Cependant, la réponse acceptée est différente.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

Ceci applique les styles aux éléments ayant les deux classes. Dans cet exemple, seul le <div> avec les deux classes devrait obtenir les styles appliqués (dans les navigateurs qui interprètent correctement le CSS):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

En gros, pensez-y comme ceci: la séparation par virgule s’applique aux éléments avec ne classe OR une autre classe et la séparation par points s’applique aux éléments avec ne classe ET une autre classe.

167
Chris Graham