CSS Selectores: el nuevo Class Prefix Selector ya está en camino

Fuentes: The Future of CSS: Target Multiple Classes with the Class Prefix Selector

El CSS Working Group resolvió hace dos semanas, durante su reunión presencial (F2F) celebrada en Berlín en agosto de 2026, incorporar al borrador de la especificación CSS Selectors Level 5 un nuevo selector denominado Class Prefix Selector, cuya sintaxis es .prefijo-*. Esta propuesta, planteada originalmente por Lea Verou en 2024, permite aplicar estilos a todos los elementos cuyas clases compartan un mismo prefijo separado por guion, sin necesidad de enumerarlas una por una ni de recurrir a clases base adicionales en el marcado HTML.

El selector responde a una necesidad habitual en sistemas de diseño y utilidades CSS, donde abundan clases como .btn-primary, .btn-secondary o .btn-danger. Hasta ahora, los desarrolladores debían listar cada selector o añadir una clase común como .btn, o bien usar selectores de atributo con coincidencia de subcadena como [class^="btn-"], una solución frágil y propensa a errores con espacios en blanco. Con .btn-*, esa agrupación se reduce a una sola línea.

La especificación actual establece que .prefijo- solo coincidirá con clases que empiecen por ese prefijo y tengan al menos un carácter adicional que no sea otro guion. Así, .foo- no seleccionará class="foo-" ni class="foo--". Tampoco se permitirán comodines arbitrarios como .foo (porque podrían sobrseleccionar clases como .footer) ni comodines intermedios como .card--primary, por motivos tanto de corrección como de rendimiento en el emparejamiento de selectores del navegador. Por ahora, el guion es el único separador aceptado.

Ningún navegador implementa todavía esta funcionalidad: Blink, Gecko y WebKit carecen de soporte y, en el caso de Firefox y Safari, ni siquiera hay bug abierto para su seguimiento. La detección de soporte puede realizarse con la regla @supports selector(.foo-*) { ... }. Dada la fase temprana del desarrollo, los autores estiman que podrían pasar varios años antes de que el selector esté disponible en producción.