CSS Selettori
CSS Selettori
Il motore dei selettori analizza il testo del selettore CSS in forma strutturata e lo valuta contro gli alberi DOM. Supporta sia le query dirette sia il matching delle regole della cascata.
Esecuzione dei Selettori
select() valuta un selettore rispetto a un albero e restituisce le corrispondenze; element_matches() verifica un singolo elemento. Entrambi accettano la sintassi standard dei selettori — selettori di tipo, classe, id, attributo e pseudo-classe, includendo combinazioni composte e complesse.
Strutture dei selettori analizzati
parse() produce un SelectorList di ComplexSelector e CompoundSelector voci costruite da TypeSelector, ClassSelector, IDSelector, AttributeSelector (con AttributeOperator), UniversalSelector, e Combinator parti.
Pseudo-Classi
Le pseudo-classi funzionali sono modellate esplicitamente: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, e le varianti strutturali nth-child tramite NthFilteredChildPseudoClass con NthArgument.
Specificity
specificity() calcola la tupla standard a tre componenti per un selettore, e max_specificity() riduce una lista; match() collega insieme parsing e valutazione. Questi sono gli stessi valori usati dalla cascata, quindi i risultati delle query e gli stili calcolati concordano sempre.
Consigli e migliori pratiche
- Usa
element_matches()all’interno dei filtri invece di rieseguireselect()per elemento - Analizza una volta e riutilizza
SelectorListquando lo stesso selettore viene eseguito su molti alberi - Quando una regola perde inaspettatamente la cascata, confronta direttamente i valori di
specificity()
Problemi comuni
| Problema | Causa | Correzione |
|---|---|---|
| Il selettore non corrisponde a nulla | Errore di sintassi nel testo del selettore | parse() genera tramite syntax_error — controlla il messaggio |
| I pareggi di uguale specificità risolvono “wrong” | Dipendenza dall’ordine | Le regole successive vincono i pareggi; controlla l’ordine delle regole |
:is() vs :where() confusione | :where() contribuisce con zero specificità | Scegli in base al peso di cascata previsto |
FAQ
Come posso testare un elemento contro un selettore?
element_matches() — restituisce un booleano senza scansionare l’albero.
Come viene calcolata la specificità?
specificity() restituisce la tupla standard dei componenti (id, classe, tipo); i gruppi :where() contribuiscono a zero.
Quali pseudo-classi sono supportate?
Le forme strutturate nel API: :is(), :where(), :has(), :not() con argomenti complessi, e selettori strutturali in stile nth-child.
API Reference Riepilogo
| Classe/Metodo | Descrizione |
|---|---|
select | Valuta un selettore rispetto a un albero |
element_matches | Testa un elemento |
parse | Analizza il testo del selettore in un SelectorList |
specificity | Calcola la tupla di specificità |
HasPseudoClass | Modulo :has() strutturato |
AttributeSelector | Corrispondenza di attributi con operatori |