CSS Selektorer

CSS Selektorer

Selektormotorn tolkar CSS selektortext till strukturerad form och utvärderar den mot DOM-träd. Den stödjer både direkta frågor och cascadens regelmatchning.


Körning av selektorer

select() utvärderar en selektor mot ett träd och returnerar matchningar; element_matches() testar ett enskilt element. Båda accepterar standardselektorsyntax — typ-, klass-, id-, attribut- och pseudoklassselektorer, inklusive sammansatta och komplexa kombinationer.

Parserade selektorsstrukturer

parse() producerar en SelectorList av ComplexSelector och CompoundSelector poster byggda från TypeSelector, ClassSelector, IDSelector, AttributeSelector (med AttributeOperator), UniversalSelector och Combinator delar.

Pseudo-klasser

Funktionella pseudo-klasser modelleras explicit: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, och strukturella nth-child-varianter via NthFilteredChildPseudoClass med NthArgument.

Specificity

specificity() beräknar den standardiserade trekomponentstupletten för en selektor, och max_specificity() reducerar en lista; match() binder samman parsning och utvärdering. Detta är samma värden som kaskaden använder, så frågeresultat och beräknade stilar är alltid överens.


Tips och bästa praxis

  • Använd element_matches() i filter istället för att köra om select() för varje element
  • Parsa en gång och återanvänd SelectorList när samma selektor körs mot många träd
  • När en regel oväntat förlorar kaskaden, jämför specificity()-värden direkt

Vanliga problem

ProblemOrsakÅtgärd
Selektorn matchar ingetSyntaxfel i selektortextparse() genereras via syntax_error — kontrollera meddelandet
Lika specificitet ger felaktig upplösningOrdningberoendeSenare regler vinner oavgjort; kontrollera regelordning
:is() vs :where() förvirring:where() bidrar med noll specificitetVälj efter avsedd kaskadvikt

FAQ

Hur testar jag ett element mot en selektor?

element_matches() — den returnerar ett boolean utan att skanna trädet.

Hur beräknas specificitet?

specificity() returnerar den standard (id, class, type) komponenttupeln; :where() grupper bidrar med noll.

Vilka pseudo-klasser stöds?

De strukturerade formerna i API: :is(), :where(), :has(), :not() med komplexa argument, och strukturella selektorer i nth-child-stil.


API Reference Sammanfattning

Klass/MetodBeskrivning
selectUtvärdera en selector mot ett träd
element_matchesTesta ett element
parseAnalysera selector-text till en SelectorList
specificityBeräkna specificitetstuplet
HasPseudoClassStrukturerad :has() form
AttributeSelectorAttributmatchning med operatorer

Se även

 Svenska