La :matchespseudoclase se describe como una pseudoclase funcional por las especificaciones oficiales de CSS Selectors Level 4. No tiene ningún propósito en sí mismo, excepto hacer que algunos selectores complejos sean más livianos al permitir que se agrupen. En cierto modo, podemos pensar como :matchesazúcar sintáctico.
Básicamente, evita que se repita un selector compuesto cuando solo hay un elemento que varía. Creo que no solo es más rápido de escribir, sino también más rápido de analizar para los navegadores, pero no tengo información sólida sobre esto, por lo que sé, esta pseudoclase no hace más que ayudar a escribir selectores.
Sintaxis
:matches( selector(, selector)* ):matches()acepta una lista de selectores válidos como argumento. Me gusta:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Hace que algunos selectores complejos sean mucho más fáciles de escribir, por ejemplo:
:matches(section, article, aside, nav) :matches(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; )Y menos repetitivo:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Tenga en cuenta que :matches()no se puede anidar y no funciona con :not(). Ninguno de los siguientes selectores funcionará:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Alerta de nerd
Las especificaciones establecen que los combinadores (por ejemplo ~, >…) no están permitidos en el selector pasado en perfil rápido, pero estarán en perfil complejo. En pocas palabras, el perfil rápido será la primera (y posible última) implementación de las especificaciones, mientras que el perfil complejo relata un hipotético futuro perfecto donde el rendimiento no importa mucho.
Actualización de junio de 2015: Ya no estoy seguro de cuán preciso es el párrafo anterior. La especificación a la que nos vinculamos ha cambiado y esa parte se ha ido. Entonces quitamos el enlace.
Imitando el comportamiento con Sass
Es posible simular un comportamiento similar con Sass (o cualquier preprocesador CSS para el caso):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Esto crea el selector equivalente de :matches()explotando el anidamiento del selector. Incluso podría crear algún tipo de función para automatizar esto a un nivel superior, pero eso está fuera del alcance aquí.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 88 | 78 | No | 88 | 14 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Nota: dado que CSS rechaza todo el selector cuando hay una parte que no comprende, debe separarlos para que funcione en todas partes. Por ejemplo, si todavía estás
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )