La pseudoclase :where en CSS te permite agrupar selectores con especificidad cero, lo que la convierte en la herramienta ideal para definir estilos base que después puedas sobrescribir sin pelearte con la cascada. Si ya conoces :is, vas a notar que se escriben igual, pero su comportamiento cambia en el momento crítico: cuando otra regla intenta modificar el estilo.

¿Qué diferencia hay entre :where y :is en CSS?

Ambas pseudoclases sirven para agrupar selectores y aplicar estilos a varios elementos a la vez. La diferencia está en cómo cada una pesa dentro de la cascada de CSS.

¿Qué es la especificidad en CSS? Es el peso que tiene un selector para decidir qué estilo se aplica cuando hay reglas en conflicto. A mayor especificidad, más difícil sobrescribir esa regla.

Con :is, la especificidad se hereda del selector más específico dentro del paréntesis, así que pesa fuerte. Con :where, la especificidad siempre es cero, sin importar qué pongas dentro. Esa es la clave de todo lo que sigue.

¿Cómo se ve el comportamiento en el código?

Imagina que tienes dos secciones en tu HTML: una con la clase destacado y otra sin clase. Si aplicas :where(.destacado) { color: green; }, la sección se pinta de verde. Si haces lo mismo con :is(.destacado), también funciona. Hasta acá, idénticos.

El quiebre aparece cuando agregas otra regla que intenta sobrescribir el color, por ejemplo .destacado { color: red; }. Tanto con :is como con :where simples, el rojo gana porque la clase suelta tiene su peso normal.

¿Cuándo :is genera problemas de especificidad?

El conflicto real aparece cuando combinas :is con un selector más específico, como section:is(.destacado). Ahí la especificidad sube y empieza a competir con tus reglas posteriores.

Si tienes:

• section:is(.destacado) { color: blue; }.
• .destacado { color: red; }.

Gana el azul, porque :is toma la especificidad del selector más fuerte y el combinado section + clase pesa más que la clase sola. Eso puede ser justo lo que querías o un dolor de cabeza, dependiendo del caso.

Ahora repite el experimento con section:where(.destacado) { color: blue; } y la misma regla .destacado { color: red; }. Gana el rojo, porque :where aporta especificidad cero y la clase suelta termina pesando más.

¿Por qué :where tiene especificidad cero? Porque está diseñada precisamente para eso: ofrecer estilos base que cualquier regla posterior pueda sobrescribir sin esfuerzo, sin importar qué tan complejos sean los selectores que metas dentro.

¿Para qué sirve :where en CSS moderno?

Usa :where cuando quieras definir un punto de partida visual que después se adapte según el contexto. Es perfecta para:

• Estilos base de un sistema de diseño que cualquier componente pueda sobrescribir.
• Resets o normalizaciones donde no quieres pelear con la cascada.
• Reglas generales que se aplican a muchos elementos pero deben ceder ante reglas específicas.

En cambio, reserva :is para cuando necesites que el estilo agrupado tenga peso real y se imponga sobre otras reglas. Saber cuándo usar cada una te evita esos bugs raros donde un color no cambia y no entiendes por qué.

¿Cuándo conviene usar :where en lugar de :is? Cuando quieras escribir estilos generales que puedan ser sobrescritos fácilmente, sin que la especificidad se vuelva un obstáculo.

La lección práctica es simple: si tu estilo necesita ser flexible y sobrescribible, :where es tu aliado. Si necesitas que mande, quédate con :is. Cuéntame en los comentarios en qué parte de tu CSS vas a empezar a usar :where.