> Faqs > Cómo hacer un selector de CSS que incluya dos clases a la vez

Cómo hacer un selector de CSS que incluya dos clases a la vez

¿Es posible hacer un selector de CSS para un elemento que incluye dos clases a la vez?

Por ejemplo tengo este código:

<div class="clase1">Este div no será seleccionado porque solo tiene clase1.</div>
<div class="clase2">Este div tampoco será seleccionado porque solo tiene clase2.</div>
<div class="clase1 clase2">Este div será seleccionado.</div>

Quiero hacer un selector que seleccione solamente la tercera división. Con las "clase1 clase2" al mismo tiempo. Que no se seleccionen los <div> primero o segundo.

Respuestas

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.

Gustavo
186 5 13 11