Si trabajas habitualmente con CSS, aprender cómo utilizar múltiples selectores dentro de :is() puede ayudarte a escribir hojas de estilo mucho más limpias, breves y fáciles de mantener.
La pseudoclase :is() de CSS permite agrupar diferentes selectores dentro de una misma expresión y evitar que tengas que repetir una y otra vez las mismas combinaciones.
Esta característica resulta especialmente práctica cuando trabajas con páginas complejas, WordPress, constructores visuales o proyectos donde aparecen numerosos elementos con estilos similares.
En este tutorial vas a aprender cómo usar varios selectores dentro de :is(), cómo combinarlos con clases, etiquetas, identificadores y otras pseudoclases, y qué errores debes evitar.
🔎 ¿Qué es :is() en CSS?
La pseudoclase :is() permite escribir una lista de selectores separados mediante comas y hacer que CSS aplique una determinada regla cuando cualquiera de ellos coincida.
Su estructura básica es la siguiente:
:is(selector1, selector2, selector3) {
propiedad: valor;
}
En lugar de escribir varios bloques CSS independientes, puedes reunir los selectores relacionados dentro de :is() y aplicarles las mismas propiedades.
Por ejemplo, imagina que quieres cambiar el color de los encabezados h2, h3 y h4.
Podrías escribir este CSS tradicional:
h2,
h3,
h4 {
color: #333;
}
Con :is() podrías expresar exactamente lo mismo de esta manera:
:is(h2, h3, h4) {
color: #333;
}
Aunque en este ejemplo la ventaja pueda parecer pequeña, :is() se vuelve mucho más útil cuando existen selectores anteriores o posteriores que tendrías que repetir.
Puedes consultar también la documentación de :is() en MDN Web Docs si quieres profundizar en su funcionamiento técnico.
🧩 Cómo utilizar múltiples selectores dentro de :is()
Para utilizar varios selectores dentro de :is() solamente tienes que separarlos mediante comas dentro de los paréntesis.
Por ejemplo:
:is(.boton, .enlace, .destacado) {
font-weight: bold;
}
Esta regla seleccionará cualquier elemento que tenga las clases .boton, .enlace o .destacado.
Puedes incluir prácticamente cualquier selector habitual dentro de la pseudoclase.
:is(div, section, article, aside) {
margin-bottom: 20px;
}
De esta forma puedes aplicar un mismo estilo a varios tipos de elementos HTML sin escribir largas cadenas de selectores.
🚀 La verdadera ventaja de utilizar :is()
La principal ventaja aparece cuando tienes una estructura CSS donde debes repetir un mismo selector padre.
Imagina que tienes el siguiente código:
.contenido h2,
.contenido h3,
.contenido h4,
.contenido h5 {
margin-top: 30px;
}
Puedes reducirlo utilizando :is():
.contenido :is(h2, h3, h4, h5) {
margin-top: 30px;
}
El código es más compacto, más fácil de leer y mucho más sencillo de modificar posteriormente.
Si quisieras añadir un h6, solamente tendrías que modificar la lista situada dentro de :is().
.contenido :is(h2, h3, h4, h5, h6) {
margin-top: 30px;
}
Esta forma de trabajar puede ahorrar bastante tiempo cuando gestionas hojas de estilo CSS extensas.
🎯 Utilizar clases múltiples dentro de :is()
También puedes introducir varias clases dentro de :is().
Por ejemplo:
:is(.primario, .secundario, .destacado) {
border-radius: 8px;
}
La regla se aplicará a cualquier elemento que tenga una de esas tres clases.
También puedes combinar :is() con un selector padre.
.tarjeta :is(.titulo, .descripcion, .precio) {
margin-bottom: 10px;
}
En este caso solamente se seleccionarán .titulo, .descripcion y .precio cuando se encuentren dentro de un elemento con la clase .tarjeta.
🖥️ Combinar etiquetas y clases dentro de :is()
No tienes que utilizar únicamente selectores del mismo tipo, ya que :is() admite diferentes clases de selectores dentro de una misma lista.
Por ejemplo:
:is(h2, .titulo, #encabezado) {
font-size: 32px;
}
La regla anterior puede afectar a un elemento h2, a un elemento con la clase .titulo o a un elemento cuyo ID sea #encabezado.
Esta flexibilidad permite crear selectores CSS muy potentes sin convertir el código en una sucesión interminable de reglas.
🧱 Utilizar varios :is() en un mismo selector
Una posibilidad especialmente interesante consiste en utilizar más de una pseudoclase :is() dentro de la misma regla CSS.
Por ejemplo:
:is(.blog, .noticias) :is(h2, h3, h4) {
color: #222;
}
Esta regla seleccionará los encabezados h2, h3 y h4 situados dentro de elementos con las clases .blog o .noticias.
Sin :is(), tendrías que escribir muchas combinaciones diferentes:
.blog h2,
.blog h3,
.blog h4,
.noticias h2,
.noticias h3,
.noticias h4 {
color: #222;
}
Con :is() consigues reducir seis selectores a una única regla mucho más comprensible.
⚙️ Cómo usar :is() paso a paso
Puedes comenzar a utilizar :is() siguiendo este procedimiento:
- 🔍 Identifica los selectores repetidos dentro de tu hoja de estilos.
- 🧩 Localiza la parte que cambia entre los diferentes selectores.
- ✏️ Introduce esas variaciones dentro de
:is()separándolas mediante comas. - 🧱 Mantén fuera de
:is()las partes del selector que sean comunes. - 🧪 Comprueba el resultado utilizando las herramientas para desarrolladores del navegador.
- 📱 Verifica que los estilos funcionan correctamente en diferentes tamaños de pantalla.
- 🧹 Sustituye progresivamente los selectores largos y repetitivos por reglas más compactas cuando realmente mejoren la legibilidad.
🔗 Combinar :is() con pseudoclases como :hover
También puedes utilizar otras pseudoclases dentro de :is().
Por ejemplo:
.boton:is(:hover, :focus) {
background: black;
}
Esta regla se aplicará cuando .boton se encuentre en estado :hover o :focus.
También podrías utilizar:
a:is(:hover, :focus, :active) {
text-decoration: underline;
}
Este recurso resulta muy útil para agrupar diferentes estados interactivos de botones y enlaces.
Si quieres revisar otras pseudoclases disponibles en CSS, puedes consultar la sección sobre pseudoclases CSS de MDN.
🌐 Ejemplo práctico dentro de una página web
Supongamos que tienes un área de contenido con artículos, productos y páginas informativas.
Podrías escribir:
:is(.articulo, .producto, .pagina) :is(h2, h3) {
margin-top: 40px;
margin-bottom: 15px;
}
Esta regla aplicará los estilos a los encabezados h2 y h3 situados dentro de cualquiera de esos tres tipos de contenedores.
En CSS tradicional necesitarías escribir seis combinaciones diferentes, lo que incrementaría considerablemente la longitud del código.
📊 Tabla resumen de usos de :is()
| Objetivo | Ejemplo | Resultado |
|---|---|---|
| Seleccionar etiquetas | :is(h2, h3, h4) | Selecciona h2, h3 y h4 |
| Seleccionar clases | :is(.uno, .dos, .tres) | Selecciona cualquiera de las clases |
| Usar un contenedor | .contenido :is(h2, h3) | Selecciona encabezados dentro del contenido |
| Combinar contenedores | :is(.blog, .pagina) h2 | Selecciona h2 dentro de ambos contenedores |
| Combinar dos grupos | :is(.blog, .pagina) :is(h2, h3) | Combina múltiples padres y elementos |
| Agrupar estados | .boton:is(:hover, :focus) | Aplica estilos en hover y focus |
| Combinar tipos | :is(h2, .titulo, #cabecera) | Mezcla etiquetas, clases e ID |
⚠️ Ten cuidado con la especificidad de :is()
Uno de los aspectos que debes conocer al utilizar :is() es la especificidad CSS.
La pseudoclase :is() adopta la especificidad del selector más específico incluido dentro de sus argumentos.
Por ejemplo:
:is(h2, .titulo, #principal) {
color: red;
}
Aunque el elemento seleccionado pueda ser simplemente un h2, la presencia de #principal dentro de la lista puede afectar a la especificidad global de la regla.
Por este motivo conviene evitar introducir identificadores excesivamente específicos dentro de :is() cuando no sean necesarios.
Puedes estudiar este concepto con mayor profundidad en la guía sobre especificidad CSS de MDN.
🆚 Diferencias entre :is() y :where()
A primera vista, :is() y :where() funcionan de forma muy parecida, ya que las dos permiten agrupar selectores.
La gran diferencia se encuentra en la especificidad.
:is() utiliza la especificidad del selector más específico contenido en su lista, mientras que :where() siempre tiene una especificidad de cero.
Por ejemplo:
:where(h2, h3, h4) {
margin-bottom: 20px;
}
Esta característica hace que :where() resulte especialmente interesante para estilos generales que quieras sobrescribir fácilmente después.
En cambio, :is() suele ser una excelente elección cuando quieres simplificar selectores conservando un comportamiento de especificidad más convencional.
💡 Ejemplos útiles de :is() que puedes reutilizar
Para modificar varios campos de un formulario puedes utilizar:
.formulario :is(input, textarea, select) {
width: 100%;
}
Para cambiar diferentes encabezados dentro de una entrada puedes escribir:
.entrada :is(h2, h3, h4) {
line-height: 1.3;
}
Para modificar enlaces situados en diferentes zonas puedes utilizar:
:is(.menu, .footer, .sidebar) a {
text-decoration: none;
}
Para controlar distintos estados de un botón puedes utilizar:
.boton:is(:hover, :focus, :active) {
opacity: 0.8;
}
Estos ejemplos muestran cómo un pequeño cambio en la estructura del selector puede reducir considerablemente la cantidad de CSS necesario.
🧹 ¿Cuándo merece la pena utilizar :is()?
Utilizar :is() merece especialmente la pena cuando detectas varios selectores que comparten una estructura común.
También resulta muy útil cuando trabajas con WordPress y quieres aplicar un estilo a elementos procedentes de diferentes bloques, plugins o plantillas.
Sin embargo, no necesitas introducir :is() en absolutamente todas tus reglas, ya que un selector tradicional puede ser más claro cuando solamente tienes dos o tres elementos sencillos.
La finalidad debería ser siempre mejorar la legibilidad y facilitar el mantenimiento de tu CSS, y no simplemente escribir el menor número posible de caracteres.
✅ Conclusión
Aprender cómo utilizar múltiples selectores dentro de :is() en CSS te permite simplificar reglas que anteriormente exigían repetir muchas combinaciones de selectores.
Solo necesitas introducir los diferentes selectores separados por comas dentro de los paréntesis de :is() para construir reglas mucho más compactas.
Además, puedes combinar :is() con etiquetas, clases, identificadores, pseudoclases e incluso utilizar varios :is() dentro del mismo selector.
Cuando empieces a aplicarlo en proyectos reales descubrirás que resulta especialmente cómodo para gestionar encabezados, formularios, botones, menús, artículos y estructuras CSS repetitivas.
Si mantienes bajo control la especificidad de los selectores, :is() puede convertirse en una de las herramientas más prácticas para escribir un CSS moderno, ordenado y fácil de mantener.
