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, anstattselect()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
| Problem | Ursache | Lösung |
|---|---|---|
| Selektor findet nichts | Syntaxfehler im Selektortext | parse() wirft via syntax_error — prüfe die Meldung |
| Gleiche Spezifität führt zu “falsch” | Reihenfolgeabhängigkeit | Spätere Regeln gewinnen bei Gleichstand; prüfe die Regelreihenfolge |
Verwirrung bei :is() vs :where() | :where() trägt null Spezifität bei | Wä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/Methode | Beschreibung |
|---|---|
select | Einen Selektor gegen einen Baum auswerten |
element_matches | Teste ein Element |
parse | Parse den Selektortext in ein SelectorList |
specificity | Berechne das Spezifitätstupel |
HasPseudoClass | Strukturierte :has()-Form |
AttributeSelector | Attribut-Matcher mit Operatoren |