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

J'ai du HTML qui aurait des éléments avec plusieurs classes, et je dois les attribuer dans une 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 ça, par exemple, qui je sais ne fonctionne pas:

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

.border-blue.background { ... }est pour un élément avec plusieurs classes.
.border-blue, .background { ... }est pour 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 la réponse de Chris pour une explication plus approfondie.

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

Le suivant:

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

est pour lorsque vous souhaitez ajouter des styles à des éléments qui ont la classe de bordure bleue ou d'arrière-plan, par exemple:

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

recevraient tous une bordure bleue et un fond blanc qui leur seraient appliqués.

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, seuls les <div>avec les deux classes devraient 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>

Donc, en gros, pensez-y comme ceci, 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 .