A :matchespseudoclasse é descrita como uma pseudoclasse funcional pelas especificações oficiais dos seletores CSS de nível 4. Ele não serve a nenhum propósito em si, exceto tornar alguns seletores complexos mais leves, permitindo que eles sejam agrupados. De certa forma, podemos pensar como :matchesaçúcar sintático.
Basicamente, evita que você repita um seletor composto quando há apenas um item que varia. Acredito que não seja apenas mais rápido escrever, mas também mais rápido analisar os navegadores, mas não tenho informações sólidas sobre isso, até onde sei, esta pseudo classe não faz nada mais do que ajudar a escrever seletores.
Sintaxe
:matches( selector(, selector)* ):matches()aceita uma lista de seletores válidos como argumento. Gostar:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Isso torna alguns seletores complexos muito mais fáceis de escrever, por exemplo:
: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; )E menos repetitivo:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Observe que :matches()não pode ser aninhado e não funciona com :not(). Nenhum dos seguintes seletores funcionará:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Alerta nerd
As especificações afirmam que os combinadores (por exemplo ~, >…) não são permitidos no seletor aprovado no perfil rápido, mas serão no perfil complexo. Para simplificar, o perfil rápido será a primeira (e possivelmente a última) implementação das especificações, enquanto o perfil complexo relaciona um futuro perfeito hipotético onde o desempenho não importa muito.
Atualização de junho de 2015: Não tenho mais certeza de quão preciso é o parágrafo acima. A especificação que vinculamos mudou e essa parte se foi. Então, removemos o link.
Imitando o comportamento com Sass
É possível simular um comportamento semelhante com Sass (ou qualquer pré-processador CSS para esse assunto):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Isso cria o seletor equivalente de :matches(), explorando o aninhamento do seletor. Você poderia até criar algum tipo de função para automatizar isso em um nível superior, mas isso está fora do escopo aqui.
Suporte de navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 88 | 78 | Não | 88 | 14 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Observação: como o CSS rejeita o seletor inteiro quando há uma parte que ele não entende, você deve separá-los para que funcione em todos os lugares. Por exemplo, se você ainda
/* 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; )