Aplicar una regla de CSS a dos clases al mismo tiempo

Busco esto a cada rato así que me lo traigo aquí para acordarme y de paso compartirlo.

Una forma de tener limpio el CSS y de paso lograr que haga lo que deseamos sin volvernos locos es poder aplicar una misma regla de CSS (o varias) a distintas clases.

Lo que pasa es que tiene truqui porque no es sólo colocar una detrás de otra.

La sintaxis es como sigue:

.border-blue.background { ... } es para un item que tiene varias clases.
.border-blue, .background { ... } es para múltiples items cada uno con sus propias clases.
.border-blue .background { ... } es para un item donde '.background' es el hijo de '.border-blue'.

Particularmente la última es una que nos va a poder resultar muy útil ya que si hemos concatenado elementos uno dentro de otro tal vez queramos una regla que sólo afecte a esa última div, y sólo cuando está dentro de ese elemento y no otro.

Esta info está sacada del gran stackoverflow.

¡Ah! Y no olvides que en CSS puedes darle a un elemento varias clases de CSS sólo colocando los nombres uno detrás de otro, tipo:

<div class="clase-1 clase-2 clase-3">Mi contenido</div>
Suscribirte
Notificación de
guest

0 Comments
Inline Feedbacks
View all comments

RELACIONADO

Cómo exportar un pdf en LibreOffice sin las líneas de grilla negra

"Seguramente ese problema ya lo ha tenido alguien antes y lo documentó". Gran frase que cuando toma cuerpo en la representación de poder resolver un problema que te acechaba hace tiempo se convierte en maravilloso maná. Uno de estos problemas venía siendo el poder exportar una hoja de LibreCalc (a.k.a. Excel) a pdf sin las feas líneas negras de la grilla. El el mismísimo foro de LibreOffice ya l…

Mostrar imagen destacada (Featured image) antes del contenido de una entrada (post)

En algunos temas de WordPress no se hace posible ver la imagen destacada en el cuerpo de la entrada, como por ejemplo en este mismo blog. Hace un tiempo cambié esa opción y cree la posibilidad gracias al siguiente post: Add Featured Image Before Content In Any Theme En mi caso sólo hizo falta sumarle este pedazo de código al functions.php dentro del child theme para no generar problemas en caso…

Soluciona el envío de email de activación en Buddypress

Una cosa horrible que pasa cuando usas el querido Buddypress es que el envío de email de activación no acaba de funcionar bien del todo. Navegando por los mares de bits encontré este truco que apunté en un post-it y ahora no recuerdo de quién era, pero mío no ¡eso seguro! Con hacer lo que sigue a mi me ha funcionado bastante bien hasta ahora: En buddypress/bp-core/bp-core-functions.php reemplaza…