Elementos de destino con varias clases, dentro de una regla

Tengo algunos HTML que tendrían elementos con múltiples clases, y necesito asignarlos dentro de una regla, para que las mismas clases puedan ser diferentes dentro de diferentes contenedores. Digamos que tengo esto en mi CSS:

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

Entonces tengo esto en mi HTML:

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

¿Puedo apuntar a estos dentro de una sola regla? Así, por ejemplo, que sé que no funciona:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}
Author: Daniele Armanasco, 2011-03-04
Source

2 answers

.border-blue.background { ... } es para un elemento con varias clases.
.border-blue, .background { ... } es para varios elementos, cada uno con su propia clase.
.border-blue .background { ... } es para un artículo donde'.fondo 'es el hijo de'.border-blue'.

Ver La respuesta de Chris para una explicación más completa.

 130
Author: Vian Esterhuizen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:54:40

En caso de que alguien tropiece con esto como lo hice yo y no se dé cuenta, las dos variaciones anteriores son para diferentes casos de uso.

Lo siguiente: 

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

Es para cuando desea agregar estilos a elementos que tienen la clase blue-border o background, por ejemplo:

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

Todos obtendrían un borde azul y un fondo blanco aplicado a ellos.

Sin embargo, la respuesta aceptada es diferente.

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

Esto aplica los estilos a los elementos que tienen ambos por lo tanto, en este ejemplo solo los <div> con ambas clases deben obtener los estilos aplicados (en navegadores que interpretan el CSS correctamente):

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

Así que básicamente piénsalo así, la separación por coma se aplica a elementos con una clase U otra clase y la separación por puntos se aplica a elementos con una clase Y otra clase.

 157
Author: Chris Graham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-01 12:08:22