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

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.


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 .


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.