Elementos de destino con varias clases, dentro de una regla

117

Tengo algo de HTML que tendría elementos con múltiples clases, y necesito asignarlos dentro de una regla, de modo 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 orientarlos dentro de una sola regla? Así, por ejemplo, que sé que no funciona:

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

Respuestas:

182

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

Vea la respuesta de Chris para una explicación más completa.

Vian Esterhuizen
fuente
2
¡Gracias! No sabía si esto era posible, así que preguntaba aquí para averiguarlo.
Tanner Ottinger
Esta solución no me funciona (o ya no funciona ...).
Fresko
debe separar las clases por comas, como dice la respuesta de Chris
fresko
¿Qué quieres decir con .border-blue .background { ... }es niño? Intenté esto y no funciona
Eliav Louski
174

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

El seguimiento:

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

es para cuando desea agregar estilos a elementos que tienen el borde azul o la clase de fondo, 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.

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 ambas clases, por lo que en este ejemplo solo <div>con ambas clases se deberían aplicar los estilos (en los navegadores que interpretan el CSS correctamente):

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

Básicamente, piénselo así, la separación por comas se aplica a elementos con una clase U otra clase y la separación de puntos se aplica a elementos con una clase Y otra clase .

Chris Graham
fuente
12
Esta fue una respuesta muy útil que casi no leí. ¡Salud!
psicopoo
1
Sólo sé cuidadoso. No hay espacios en.blue-border.background
Knu8
2
think of it as AND and OR: Buen consejo. Debo agregar que .x .yse puede considerar comoy && ancestors.has(x)
Siddharth Garg