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 van select() per element opnieuw uit te voeren.
  • Parseer één keer en hergebruik de SelectorList wanneer dezelfde selector tegen veel bomen wordt uitgevoerd.
  • Wanneer een regel onverwacht de cascade verliest, vergelijk specificity()-waarden direct.

Veelvoorkomende problemen

ProbleemOorzaakOplossing
Selector komt nergens overeenSyntaxisfout in selectortekstparse() wordt opgegooid via syntax_error — controleer het bericht
Gelijke specificiteit ties lossen “wrong” opVolgorde-afhankelijkheidLatere regels winnen bij gelijke stand; controleer de volgorde van regels
:is() vs :where() verwarring:where() draagt nul specificiteit bijKies 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/MethodeBeschrijving
selectEvalueer een selector tegen een boom
element_matchesTest één element
parseParse selector-tekst naar een SelectorList
specificityBereken de specificiteit-tuple
HasPseudoClassGestructureerd :has()-formulier
AttributeSelectorAttribuutmatcher met operatoren

Zie ook

 Nederlands