CSS Selectores
CSS Selectores
El motor de selectores analiza el texto del selector CSS en forma estructurada y lo evalúa contra los árboles DOM. Soporta tanto consultas directas como la coincidencia de reglas de la cascada.
Ejecutando Selectores
select() evalúa un selector contra un árbol y devuelve coincidencias; element_matches() prueba un solo elemento. Ambos aceptan la sintaxis estándar de selectores — de tipo, clase, id, atributo y pseudo-clase, incluyendo combinaciones compuestas y complejas.
Estructuras de Selectores Analizados
parse() produce un SelectorList de ComplexSelector y CompoundSelector entradas construidas a partir de TypeSelector, ClassSelector, IDSelector, AttributeSelector (con AttributeOperator), UniversalSelector y Combinator partes.
Pseudo-clases
Las pseudo-clases funcionales se modelan explícitamente: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, y variantes estructurales nth-child a través de NthFilteredChildPseudoClass con NthArgument.
Specificity
specificity() calcula la tupla estándar de tres componentes para un selector, y max_specificity() reduce una lista; match() une el análisis y la evaluación. Estos son los mismos valores que usa la cascada, por lo que los resultados de la consulta y los estilos calculados siempre coinciden.
Consejos y Mejores Prácticas
- Utiliza
element_matches()dentro de los filtros en lugar de volver a ejecutarselect()por elemento - Analiza una vez y reutiliza el
SelectorListcuando el mismo selector se ejecuta contra muchos árboles - Cuando una regla pierde inesperadamente la cascada, compara los valores de
specificity()directamente
Problemas Comunes
| Problema | Causa | Corrección |
|---|---|---|
| Selector no coincide con nada | Error de sintaxis en el texto del selector | parse() genera a través de syntax_error — verifica el mensaje |
| Los empates de especificidad igual resuelven “wrong” | Dependencia del orden | Las reglas posteriores ganan empates; verifica el orden de las reglas |
Confusión :is() vs :where() | :where() aporta cero especificidad | Elige según el peso de cascada deseado |
FAQ
¿Cómo pruebo un elemento contra un selector?
element_matches() — devuelve un booleano sin escanear el árbol.
¿Cómo se calcula la especificidad?
specificity() devuelve la tupla estándar de componentes (id, class, type); los grupos :where() contribuyen cero.
¿Qué pseudo-clases son compatibles?
Las formas estructuradas en el API: :is(), :where(), :has(), :not() con argumentos complejos, y selectores estructurales al estilo nth-child.
API Reference Resumen
| Clase/Método | Descripción |
|---|---|
select | Evaluar un selector contra un árbol |
element_matches | Probar un elemento |
parse | Analizar el texto del selector en un SelectorList |
specificity | Calcular la tupla de especificidad |
HasPseudoClass | Formulario estructurado :has() |
AttributeSelector | Coincidencia de atributos con operadores |