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 crear un icono para un appimage en Ubuntu / How to create appimage entries in menu in Ubuntu

Acabo de hacer esto para Obsidian.md y va de perlas. Algo que quería hacer desde hace tiempo porque en ocasiones existen .appimages para Ubuntu que no se autoinstalan, sino que lo guardas en una carpeta y de ahí cada vez que quieres usarlo tienes que iniciarlo. Yo tengo una carpeta en mi raíz que se llama "Programas" y ahí dentro voy guardando los programas que descargo para su uso. Qué deci…

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…