CSS Selectoren
CSS Selectoren
De selector-engine parseert CSS selector-tekst naar een gestructureerde vorm en evalueert deze tegen DOM-bomen. Hij ondersteunt zowel directe queries als het matchen van regels in de cascade.
Selectoren uitvoeren
select() evalueert een selector tegen een boom en retourneert overeenkomsten; element_matches() test een enkel element. Beide accepteren standaard selector-syntaxis — type-, class-, id-, attribuut- en pseudo-class-selectoren, inclusief samengestelde en complexe combinaties.
Geparseerde selectorstructuren
parse() produceert een SelectorList van ComplexSelector en CompoundSelector items opgebouwd uit TypeSelector, ClassSelector, IDSelector, AttributeSelector (met AttributeOperator), UniversalSelector, en Combinator onderdelen.
Pseudo-klassen
Functionele pseudo-klassen worden expliciet gemodelleerd: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, en structurele nth-child-varianten via NthFilteredChildPseudoClass met NthArgument.
Specificity
specificity() berekent de standaard drie-componenten-tuple voor een selector, en max_specificity() reduceert een lijst; match() verbindt parsing en evaluatie. Dit zijn dezelfde waarden die de cascade gebruikt, zodat queryresultaten en berekende stijlen altijd overeenkomen.
Tips en best practices
- Gebruik
element_matches()binnen filters in plaats vanselect()per element opnieuw uit te voeren. - Parseer één keer en hergebruik de
SelectorListwanneer dezelfde selector tegen veel bomen wordt uitgevoerd. - Wanneer een regel onverwacht de cascade verliest, vergelijk
specificity()-waarden direct.
Veelvoorkomende problemen
| Probleem | Oorzaak | Oplossing |
|---|---|---|
| Selector komt nergens overeen | Syntaxisfout in selectortekst | parse() wordt opgegooid via syntax_error — controleer het bericht |
| Gelijke specificiteit ties lossen “wrong” op | Volgorde-afhankelijkheid | Latere regels winnen bij gelijke stand; controleer de volgorde van regels |
:is() vs :where() verwarring | :where() draagt nul specificiteit bij | Kies per beoogd cascade-gewicht |
FAQ
Hoe test ik één element tegen een selector?
element_matches() — het retourneert een boolean zonder de boom te scannen.
Hoe wordt specificiteit berekend?
specificity() retourneert de standaard (id, class, type) component-tuple; :where() groepen dragen niets bij.
Welke pseudo-classes worden ondersteund?
De gestructureerde vormen in de API: :is(), :where(), :has(), :not() met complexe argumenten, en nth-child-style structurele selectors.
API Reference Samenvatting
| Klasse/Methode | Beschrijving |
|---|---|
select | Evalueer een selector tegen een boom |
element_matches | Test één element |
parse | Parse selector-tekst naar een SelectorList |
specificity | Bereken de specificiteit-tuple |
HasPseudoClass | Gestructureerd :has()-formulier |
AttributeSelector | Attribuutmatcher met operatoren |