CSS/Selektoren

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 getrennt werden.

Selektor1, Selektor2  { Deklarationen }

Sollen mehrere Bedingungen auf ein Element zutreffen, so dürfen keine Leerzeichen zwischen die Selektoren geschrieben werden.

elementname.klassenname    { Deklarationen }
.klassenname[attributname] { Deklarationen }

Selektoren können durch Kombinatoren miteinander verkettet werden. Zwischen zwei Selektoren darf dabei nur genau ein Kombinator stehen, allerdings dürfen beliebig viele Selektoren miteinander verkettet werden.

elementname > .klassenname { Deklarationen }
.klassenname elementname   { Deklarationen }

Referenz-Seiten

• einfache Selektoren
  • Universalselektor
  • ID-Selektor
  • Klassenselektor
  • Typselektor
  • Attributselektoren
    • Attributpräsenz
    • Attributwert
    • Teilübereinstimmung
• Kombinatoren
  • Kindselektor
  • Nachfahrenselektor
  • Nachbarselektor
  • Geschwisterselektor
• Pseudoelemente
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
• Pseudoklassen
  • strukturelle Pseudoklassen
  • dynamische Pseudoklassen

• Pseudoklassen
  • strukturelle Pseudoklassen
    • :root
    • :empty
    • :first-child
    • :first-of-type
    • :fullscreen
    • :last-child
    • :last-of-type
    • :nth-child()
    • :nth-of-type()
    • :nth-last-child()
    • :nth-last-of-type()
    • :only-child
    • :only-of-type
  • dynamische Pseudoklassen
    • :active
    • :any-link
    • :checked
    • :disabled
    • :enabled
    • :focus
    • :focus-visible
    • :focus-within
    • :hover
    • :in-range
    • :invalid
    • :link
    • :out-of-range
    • :placeholder-shown
    • :target
    • :valid
    • :visited
  • :has()
  • :is() (war: matches())
  • :lang()
  • :not()
• einfache Selektoren
• Kombinatoren
• Pseudoelemente

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.

Hinweis

Da zu Selectors Level 4-konforme CSS-Implementierungen das Fast Selector Profile verwenden müssen, ist grundsätzlich zu empfehlen das Vorliegen des Fast Selector Profiles anzunehmen und somit zuvor genannte Einschränkungen zu berücksichtigen.

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.

Beachten Sie: Die Zählung der Elemente beginnt bei 1 und nicht bei 0 (wie es bspw. in vielen Programmiersprachen der Fall ist), die Zählung der Laufvariablen 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

Beispiel

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 */

Beachten Sie: Werden A und B gleich 0 gesetzt, so werden keine Elemente selektiert.

Weblinks

• W3C: Selectors Level 4 - Fast vs. Complete Selector Profiles (englisch)
• W3C: Selectors Level 4 - Indexed Pseudo-classes: the An+B micro-syntax (englisch)
• W3C: Selectors Level 4 - Selector Lists (englisch)
• W3C: Selectors Level 4 - Selector Syntax and Structure (englisch)
• Wikipedia: Selektoren