Para seleccionar elementos en CSS que tengan dos clases aplicadas al mismo tiempo, necesitas concatenar las clases en el selector sin dejar espacio entre ellas. En este caso sería "clase1.clase2".
Con eso lo tienes.
.clase1.clase2 {
/* Estilos aquí */
color: red;
background-color: blue;
}
Este selector busca cualquier elemento que tenga ambas clases, clase1
y clase2
. Importante es no dejar espacio entre .clase1
y .clase2
en el selector, porque el espacio en los selectores de CSS significa que estás buscando un descendiente y no un elemento que comparte ambas clases.
Esta combinación de selectores en realidad no es tan rara. A veces los combinamos para que aplique a dos elementos a la vez, no necesariamente clases. Por ejemplo:
p.rojo {
color: red;
}
El selector anterior aplica a los dos selectores a la vez. Qué sea una etiqueta <p>
y a la vez que tenga la clase rojo. Esta versión de uso de dos selectores distintos es más común pero no deja de ser la misma combinación que se usa cuando necesitas que aplique a dos clases a la vez. Simplemente colocas los selectores juntos sin espacios entre medias.