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.