La pseudoclase :is en CSS te permite agrupar múltiples selectores en una sola declaración y reducir líneas de código repetidas. Es una herramienta clave del CSS moderno para quienes buscan escribir hojas de estilo más limpias, mantenibles y eficientes.

Aquí vas a ver dos ejemplos prácticos: uno básico aplicado a títulos y otro más avanzado que combina varios contenedores semánticos con un selector interno.

¿Qué hace la pseudoclase :is en CSS?

La pseudoclase :is() recibe una lista de selectores y aplica los estilos al elemento que coincida con cualquiera de ellos. En lugar de repetir reglas para h1, h2 y h3, los agrupas dentro de un mismo bloque.

¿Qué es la pseudoclase :is en CSS? Es un selector que agrupa varios selectores dentro de paréntesis y aplica los mismos estilos a todos ellos, evitando repetir código.

En el primer ejemplo se crean tres títulos: un h1 con Ejemplo de pseudoclase is, un h2 con Vamos a ahorrar muchas líneas de código y un h3 con Curso de CSS avanzado por Sergi Code para Platzi. Con un solo bloque puedes estilizarlos todos:

css :is(h1, h2, h3) { color: darkblue; text-transform: uppercase; text-align: center; }

Los tres títulos cambian al mismo tiempo: color azul oscuro, mayúsculas y alineación centrada. Sin :is, tendrías que escribir tres selectores separados o una lista separada por comas más larga y menos legible.

¿Cómo combinar :is con un selector descendiente?

El segundo ejemplo muestra el verdadero poder de esta pseudoclase: usarla como filtro de contexto para apuntar a un elemento interno. Imagina que tienes un article, un section, un aside y un div, y dentro de cada uno hay un párrafo con un enlace que dice Leer más acerca de este artículo en este enlace.

Quieres estilizar los enlaces que están dentro de los tres primeros contenedores, pero no el que vive dentro del div. La solución es esta:

css :is(article, section, aside) a { color: red; text-decoration: none; font-weight: bold; }

Aquí :is no estiliza los contenedores en sí, sino que define un grupo de contextos válidos. Solo los enlaces a que estén dentro de article, section o aside recibirán color rojo, sin subrayado y en negrita. El enlace dentro del div queda con el estilo por defecto del navegador.

¿Para qué sirve :is con selectores descendientes? Sirve para aplicar estilos a un elemento hijo solo cuando está dentro de ciertos contenedores específicos, sin tener que escribir una regla por cada combinación.

¿Cuándo conviene usar :is en tus proyectos?

Usa :is cuando detectes patrones repetidos en tu CSS. Algunos casos donde brilla:

• Estilos compartidos entre varios niveles de encabezados como h1, h2 y h3.
• Reglas que aplican a elementos hijos dentro de múltiples contenedores semánticos.
• Listas de selectores largas que quieres compactar para mejorar la lectura.
• Estados o variantes que comparten propiedades base.

Después de identificar el patrón, agrupar con :is te ahorra líneas y deja la intención del código más clara para cualquiera que lo lea después.

¿Qué ventajas reales aporta :is frente a la lista separada por comas?

Aunque h1, h2, h3 { ... } también funciona, :is tiene una diferencia importante: te permite anidar el grupo dentro de un selector más complejo sin repetirlo. Escribir :is(article, section, aside) a es mucho más limpio que article a, section a, aside a, y la ventaja crece a medida que añades más contenedores o más niveles.

Además, :is se integra de forma natural con otras herramientas del CSS moderno, lo que abre la puerta a hojas de estilo más declarativas y mantenibles.

¿Ya identificaste en tu propio código una sección donde podrías reemplazar varias reglas por una sola con :is? Cuéntame en los comentarios cómo quedó tu refactor.