CSS Seletores
CSS Seletores
O motor de seletores analisa o texto do seletor CSS em forma estruturada e o avalia contra árvores DOM. Ele suporta tanto consultas diretas quanto a correspondência de regras da cascata.
Executando Seletores
select() avalia um seletor contra uma árvore e retorna correspondências; element_matches() testa um único elemento. Ambos aceitam a sintaxe padrão de seletores — de tipo, classe, id, atributo e pseudo-classe, incluindo combinações compostas e complexas.
Estruturas de Seletores Analisados
parse() produz um SelectorList de ComplexSelector e CompoundSelector entradas construídas a partir de TypeSelector, ClassSelector, IDSelector, AttributeSelector (com AttributeOperator), UniversalSelector e Combinator partes.
Pseudo-Classes
Pseudo-classes funcionais são modeladas explicitamente: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, e variantes estruturais nth-child via NthFilteredChildPseudoClass com NthArgument.
Specificity
specificity() calcula a tupla padrão de três componentes para um seletor, e max_specificity() reduz uma lista; match() une a análise e a avaliação. Esses são os mesmos valores que a cascata usa, portanto os resultados de consultas e os estilos computados sempre concordam.
Dicas e Melhores Práticas
- Use
element_matches()dentro de filtros ao invés de reexecutarselect()por elemento - Analise uma vez e reutilize o
SelectorListquando o mesmo seletor for executado contra muitas árvores - Quando uma regra inesperadamente perde a cascata, compare os valores de
specificity()diretamente
Problemas Comuns
| Problema | Causa | Correção |
|---|---|---|
| Seletor não corresponde a nada | Erro de sintaxe no texto do seletor | parse() gera via syntax_error — verifique a mensagem |
| Empates de especificidade igual resultam em “errado” | Dependência de ordem | Regras posteriores vencem empates; verifique a ordem das regras |
Confusão :is() vs :where() | :where() contribui com especificidade zero | Escolha de acordo com o peso de cascata pretendido |
FAQ
Como testar um elemento contra um seletor?
element_matches() — ele retorna um booleano sem percorrer a árvore.
Como a especificidade é calculada?
specificity() retorna a tupla padrão (id, class, type); :where() grupos contribuem zero.
Quais pseudo-classes são suportadas?
As formas estruturadas no API: :is(), :where(), :has(), :not() com argumentos complexos, e seletores estruturais no estilo nth-child.
API Reference Resumo
| Classe/Método | Descrição |
|---|---|
select | Avalie um seletor contra uma árvore |
element_matches | Teste um elemento |
parse | Analise o texto do seletor em um SelectorList |
specificity | Calcule a tupla de especificidade |
HasPseudoClass | Forma :has() estruturada |
AttributeSelector | Correspondente de atributo com operadores |