Cibler des éléments avec plusieurs classes, dans une seule règle

Question

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

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

Alors 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);
}

Answer 1

Utilisation de .border-blue.background { ... } a toujours fonctionné pour moi

Answer 2

Au cas où quelqu'un tomberait dessus comme moi et ne le réaliserait pas, les deux variantes ci-dessus sont destinées à des cas d'utilisation différents.

Les suivantes :

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

sert à ajouter des styles aux éléments qui ont 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>

se verraient tous appliquer une bordure bleue et un fond blanc.

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

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

Cela applique les styles aux éléments qui ont les deux classes, donc dans cet exemple, seul l'élément <div> avec les deux classes devraient voir 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 de la manière suivante : la séparation par virgule s'applique aux éléments avec une classe OU une autre classe et la séparation par points s'applique aux éléments avec une classe ET une autre classe .

Answer 3

Oui, c'est la bonne réponse

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