Aplicar una regla de CSS a dos clases al mismo tiempo

Código

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