:is() es el nombre actual de la pseudoclase "Matches-Any" en el borrador de trabajo de CSS4.
Originalmente, esta pseudoclase recibió un nombre :any()y se implementó con un soporte limitado específico del proveedor:
/* Never actually worked */ :any(div, p) > em ( /*… */ )El nombre :matches()de la pseudoclase "Matches-Any" se cambió a en las primeras versiones del borrador de trabajo de CSS4, con soporte adicional (incompleto) que se le dio a algunos navegadores.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Finalmente, el borrador de trabajo actual ha cambiado el nombre de esta pseudoclase a :is(), que actualmente no es compatible con los navegadores.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )El objetivo del selector "Coincide con cualquiera" (con todos sus nombres) es facilitar la escritura de agrupaciones complejas de selectores.
Sintaxis
/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Oye, ¿no es eso como el preprocesamiento de CSS?
Simplificar los selectores con :is()es de hecho similar a cómo los preprocesadores CSS manejan las reglas anidadas:
/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */¡Pero cuidado! Los preprocesadores, como Sass, "desenrollan" sus reglas anidadas en una lista de selectores fáciles de entender. :is()manejará las reglas de especificidad de manera un poco diferente:
La especificidad es interesante
Según el Borrador de Trabajo de CSS4:
La especificidad de la pseudoclase: is () se reemplaza por la especificidad de su argumento más específico. Por lo tanto, un selector escrito con: is () no tiene necesariamente una especificidad equivalente al selector equivalente escrito sin: is ().
Eso significa que la especificidad de :is()se actualiza automáticamente al elemento más específico en la lista de argumentos proporcionada:
/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */Soporte del navegador
Aludimos a esto anteriormente, pero :is()no tiene soporte de navegador en este momento. Fue introducido en el Borrador 1 del Editor de la Especificación de Nivel 4 de Selectores CSS. Eso significa que las cosas todavía están tomando forma, por lo que es un poco temprano para que los navegadores se unan en torno a un concepto como este.
Dicho esto, tenemos una excelente compatibilidad con el navegador en forma de :matches(con el prefijo del proveedor para :anycompletar algunos vacíos) para la funcionalidad general. Y, por supuesto, :nothay otra pseudoclase que puede ayudar con la coincidencia.
Lo que es interesante notar es que :is()se introdujo después de lo :matchescual se introdujo después :any. Es como si :anyestuviera siendo reemplazado por :matchescuál está siendo reemplazado por :is(), con los detalles cambiando a lo largo del camino. Siempre ordenado para ver cómo evolucionan estas cosas.
Para obtener el máximo soporte para "Matches-Any" requiere usar una combinación de los nombres históricos, ya que el manejo del navegador es actualmente una mezcolanza de prefijos de proveedores y configuraciones experimentales en este momento.
/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )Vea los ejemplos de Pen de: cualquier pseudoclase de CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
:matches():not():any-link()
Recursos
- La publicación del blog de David Baron explica por qué agregó
:-moz-anyapoyo a Gecko - Documentación MDN
- Especificación de nivel 4 de selectores CSS (borrador del editor 1): la especificación que presenta la
:is()pseudoclase. - Conozca los selectores de pseudo clases: publicación de trucos CSS que describe cómo funcionan las pseudoclases.