:is() é o nome atual da pseudo-classe “Matches-Any” no rascunho de trabalho CSS4.
Originalmente, esta pseudo-classe foi nomeada :any()e implementada com suporte específico do fornecedor limitado:
/* Never actually worked */ :any(div, p) > em ( /*… */ )O nome da pseudo classe “Matches-Any” foi então alterado para :matches()nas primeiras versões do rascunho de trabalho CSS4, com suporte adicional (incompleto) sendo fornecido a alguns navegadores.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Finalmente, o rascunho de trabalho atual renomeou esta pseudo-classe para :is(), que atualmente não é suportada em navegadores.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )O objetivo do seletor “Corresponde a Qualquer” (com todos os seus nomes) é facilitar a escrita de agrupamentos complexos de seletores.
Sintaxe
/* 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; )Ei, isso não é como o pré-processamento CSS?
Simplificar os seletores com :is()é de fato semelhante a como os pré-processadores CSS lidam com regras aninhadas:
/* 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()! */Mas cuidado! Pré-processadores, como Sass, “desenrolam” suas regras aninhadas em uma lista de seletores de fácil compreensão. :is()tratará as regras de especificidade de maneira um pouco diferente:
A especificidade é interessante
De acordo com o CSS4 Working Draft:
A especificidade da pseudo classe: is () é substituída pela especificidade de seu argumento mais específico. Assim, um seletor escrito com: is () não tem necessariamente especificidade equivalente ao seletor equivalente escrito sem: is ().
Isso significa que a especificidade de :is()é atualizada automaticamente para o item mais específico na lista de argumentos fornecida:
/* 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`! */Suporte para navegador
Já mencionamos isso antes, mas :is()não tem suporte para navegador no momento. Foi introduzido no Rascunho 1 do Editor da Especificação de nível 4 dos seletores CSS. Isso significa que as coisas ainda estão tomando forma, tornando um pouco cedo para os navegadores se concentrarem em um conceito como este.
Dito isso, temos um ótimo suporte ao navegador na forma de :matches(com prefixo do fornecedor :anypreenchendo algumas lacunas) para a funcionalidade geral. E, :noté claro, há outra pseudo-classe que pode ajudar na correspondência.
O que é interessante notar é que :is()foi introduzido depois do :matchesque foi introduzido depois :any. É como :anyse estivesse sendo substituído pelo :matchesque está sendo substituído por :is(), com os detalhes mudando ao longo do caminho. É sempre bom ver como essas coisas evoluem.
Para obter suporte máximo para “Matches-Any” requer o uso de uma combinação de nomes históricos, já que o manuseio do navegador é atualmente uma mistura de prefixos de fornecedores e configurações experimentais neste ponto.
/* 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 ( /*… */ )Veja os exemplos de Pen de: qualquer pseudo-classe por CSS-Tricks (@ css-tricks) em CodePen.
Relacionado
:matches():not():any-link()
Recursos
- Postagem do blog de David Baron explicando porque ele adicionou
:-moz-anysuporte ao Gecko - Documentação MDN
- Especificação de nível 4 dos seletores CSS (Rascunho 1 do Editor): A especificação que introduz a
:is()pseudoclasse. - Conheça os seletores de pseudo classes: postagem de truques de CSS que descreve como funcionam as pseudo classes.