CSS/Selektoren
- einfache Selektoren
- Universalselektor
- ID-Selektor
- Klassenselektor
- Typselektor
- Attributselektoren
- Kombinatoren
- Pseudoelemente
- Pseudoklassen
Diese Referenz enthält wichtige Übersichten, die im beschreibenden Teil der Dokumentation in dieser Vollständigkeit nicht möglich sind. Der Abschnitt eignet sich nur zum Nachschlagen, nicht zum Einarbeiten in die Materie.
→ Hauptartikel: CSS/Tutorials/Selektoren
Syntax
Mehrere Selektoren können durch Kommata zu einer Selektorliste verbunden werden, um einen Regelsatz für unterschiedliche Selektoren zu aktivieren.
Selektor1, Selektor2 { Deklarationen }
Sollen mehrere einfache Selektoren auf ein Element zutreffen, so bilden sie einen verbundenen Selektor. Dafür dürfen keine Leerzeichen zwischen die einfachen Selektoren geschrieben werden.
elementname.klassenname { Deklarationen }
.klassenname[attributname] { Deklarationen }
Einfache und verbundene Selektoren können durch Kombinatoren miteinander verkettet werden und bilden dann einen komplexen Selektor. Zwischen zwei Selektoren darf dabei nur genau ein Kombinator stehen, allerdings dürfen beliebig viele Selektoren miteinander verkettet werden. Beachten Sie, dass eine einfache Leerstelle ebenfalls einen Kombinator darstellt!
elementname > .klassenname { Deklarationen }
.klassenname elementname { Deklarationen }
CSS Präprozessoren unterstützten schon länger die Möglichkeit, CSS Regeln zu schachteln. Das erspart das ständige Wiederholen eines gemeinsamen Selektoranfangs. Das CSS Nesting Modul spezifiziert ein ähnliches Feature für den CSS Parser im Browser, dazu dient der Schachtelungs-Selektor (oder nesting selector) &
selektor {
eigenschaft:wert;
& selektor2 {
eigenschaft2:wert2;
}
}
Referenz-Seiten
- einfache Selektoren
- Universalselektor
- ID-Selektor
- Klassenselektor
- Typselektor
- Attributselektoren
- Kombinatoren
- Pseudoelemente
- Pseudoklassen
- Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
Terminologie
Profile
Selektoren werden in vielen unterschiedlichen Zusammenhängen verwendet, welche sehr unterschiedliche Anforderungen benötigen. Einige mächtige Selektoren sind leider zu langsam, um sinnvoll in leistungskritischen Anwendungen eingesetzt zu werden. Die CSS-Spezifikation berücksichtigt dies durch zwei verschiedene Profile. In den Spezifikationen von 2013 wurden sie noch fast profile und complete profile genannt, in der Fassung von 2018 erfolgte eine Umbenennung auf live und snapshot.
Live Selector Profile
Das Live Selector Profile (ursprünglich fast profile genannt) kann in jedem Kontext, einschließlich dynamischer Selektor-Auswahl in einem Browser, verwendet werden. Die Spezifikation von 2013 hat in diesem Profil noch den Einsatz von Kombinatoren in den Pseudoklassen :is() (ehemals :matches), :not(), :nth-child() und :nth-last-child() (ehemals :nth-match und :nth-last-match) ausgeschlossen, sowie den Gebrauch von Referenz-Kombinatoren und des Subjekt-Indikators. Kombinatoren in den genannten Pseudoklassen wurden 2018 in das live profile aufgenommen, Referenz-Kombinatoren sind aus der Spec gestrichen worden und der Subjekt-Indikator wurde durch die Pseudoklasse :has ersetzt.
:has() wird bis heute (2021) von keinem Browser unterstützt und ist als einziger Selektor aus dem live profile ausgenommen.
Snapshot Selector Profile
Das Snapshot Selector Profile (ursprünglich complete profile genannt) kann in Kontexten genutzt werden, in denen die Performance keine wichtige Rolle spielt. So sollte beispielsweise bei einer Implementierung der Selektoren-API dieses Profil verwendet werden. Es beinhaltet alle definierten Selektoren.
Indexbasierte Pseudo-Klassen: Die An + B Mikrosyntax
Einige Pseudoklassen verwenden eine Mikro-Syntax, um bestimmte Elemente einer Liste aus Elementen mit Hilfe ihrer Indizes zu selektieren. Diese Syntax wird An + B-Notation genannt. Mit Hilfe dieser Syntax werden nach einem Versatz B alle A-ten Elemente selektiert.
n hingegen bei 0 (s.a. die folgenden Beispiele).Die Syntax akzeptiert auch die Werte even und odd:
| Wert | Entsprechung in An + B
|
Bedeutung |
|---|---|---|
even
|
2n + 0
|
alle Elemente mit geradem Index, also das 2., 4., 6., ... Element |
odd
|
2n + 1
|
alle Elemente mit ungeradem Index, also das 1., 3., 5., ... Element |
2n + 0 /* selektiert alle Elemente mit geradem Index */
even /* selektiert auch alle Elemente mit geradem Index */
4n + 1 /* selektiert das 1., 5., 9., 13., ... Element */
4n+1 /* Whitespace wird ignoriert, daher gleiches Ergebnis wie Zeile zuvor */
4n /* selektiert das 4., 8., 12., 16., ... Element; B darf 0 sein */
n+2 /* selektiert alle Elemente außer dem ersten Element; entspricht A = 1 */
0n+2 /* selektiert das zweite Element; auch A darf 0 sein */
2 /* gleiches Ergebnis wie Zeile zuvor (A = 0) */
n /* alle Elemente der Liste */
Für A und B dürfen auch negative Werte angegeben werden, allerdings werden nur Elemente selektiert, bei denen An + B für n ≥ 0 positiv ist:
-n + 6 /* selektiert die ersten 6 Listenelemente */
A und B gleich 0 gesetzt, so werden keine Elemente selektiert.
