CSS Selektoren

CSS Selektoren

Die Selektoren-Engine parst CSS Selektortext in strukturierte Form und wertet ihn gegen DOM-Bäume aus. Sie unterstützt sowohl direkte Abfragen als auch die Regelzuordnung der Kaskade.


Ausführen von Selektoren

select() bewertet einen Selektor gegen einen Baum und gibt Treffer zurück; element_matches() testet ein einzelnes Element. Beide akzeptieren die standardmäßige Selektorsyntax — Typ-, Klassen-, ID-, Attribut- und Pseudo-Klassen-Selektoren, einschließlich zusammengesetzter und komplexer Kombinationen.

Geparste Selektorstrukturen

parse() erzeugt ein SelectorList von ComplexSelector und CompoundSelector Einträgen, die aus TypeSelector, ClassSelector, IDSelector, AttributeSelector (mit AttributeOperator), UniversalSelector und Combinator Teilen bestehen.

Pseudo-Klassen

Funktionale Pseudoklassen werden explizit modelliert: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass und strukturelle nth-child-Varianten über NthFilteredChildPseudoClass mit NthArgument.

Specificity

specificity() berechnet das standardmäßige dreikomponentige Tupel für einen Selektor, und max_specificity() reduziert eine Liste; match() verbindet Parsing und Evaluation. Dies sind dieselben Werte, die der Cascade verwendet, sodass Abfrageergebnisse und berechnete Stile stets übereinstimmen.


Tipps und bewährte Vorgehensweisen

  • Verwenden Sie element_matches() innerhalb von Filtern, anstatt select() pro Element erneut auszuführen.
  • Parsen Sie einmal und wiederverwenden Sie das SelectorList, wenn derselbe Selektor gegen viele Bäume ausgeführt wird.
  • Wenn eine Regel unerwartet die Kaskade verliert, vergleichen Sie die specificity()-Werte direkt.

Häufige Probleme

ProblemUrsacheLösung
Selektor findet nichtsSyntaxfehler im Selektortextparse() wirft via syntax_error — prüfe die Meldung
Gleiche Spezifität führt zu “falsch”ReihenfolgeabhängigkeitSpätere Regeln gewinnen bei Gleichstand; prüfe die Regelreihenfolge
Verwirrung bei :is() vs :where():where() trägt null Spezifität beiWählen nach beabsichtigter Kaskadengewichtung

FAQ

Wie teste ich ein Element gegen einen Selektor?

element_matches() — es gibt einen booleschen Wert zurück, ohne den Baum zu durchsuchen.

Wie wird die Spezifität berechnet?

specificity() gibt das Standard-(id, class, type)-Komponententupel zurück; :where()-Gruppen tragen nichts bei.

Welche Pseudo-Klassen werden unterstützt?

Die strukturierten Formen im API: :is(), :where(), :has(), :not() mit komplexen Argumenten und strukturellen Selektoren im nth-child-Stil.


API Reference Zusammenfassung

Klasse/MethodeBeschreibung
selectEinen Selektor gegen einen Baum auswerten
element_matchesTeste ein Element
parseParse den Selektortext in ein SelectorList
specificityBerechne das Spezifitätstupel
HasPseudoClassStrukturierte :has()-Form
AttributeSelectorAttribut-Matcher mit Operatoren

Siehe auch

 Deutsch