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);
}
.border-blue .background { ... }
es niño? Intenté esto y no funcionaEn 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:
es para cuando desea agregar estilos a elementos que tienen el borde azul o la clase de fondo, por ejemplo:
todos obtendrían un borde azul y un fondo blanco aplicado.
Sin embargo, la respuesta aceptada es diferente.
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):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 .
fuente
.blue-border.background
think of it as AND and OR
: Buen consejo. Debo agregar que.x .y
se puede considerar comoy && ancestors.has(x)