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 ejecutar select() por elemento
  • Analiza una vez y reutiliza el SelectorList cuando el mismo selector se ejecuta contra muchos árboles
  • Cuando una regla pierde inesperadamente la cascada, compara los valores de specificity() directamente

Problemas Comunes

ProblemaCausaCorrección
Selector no coincide con nadaError de sintaxis en el texto del selectorparse() genera a través de syntax_error — verifica el mensaje
Los empates de especificidad igual resuelven “wrong”Dependencia del ordenLas reglas posteriores ganan empates; verifica el orden de las reglas
Confusión :is() vs :where():where() aporta cero especificidadElige 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étodoDescripción
selectEvaluar un selector contra un árbol
element_matchesProbar un elemento
parseAnalizar el texto del selector en un SelectorList
specificityCalcular la tupla de especificidad
HasPseudoClassFormulario estructurado :has()
AttributeSelectorCoincidencia de atributos con operadores

Ver también

 Español