CSS Selectors

Selektoren definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.

Grundlegende Selektoren

Typselektoren

Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen Namen matchen.
Syntax: eltname
Beispiel: input matcht jedes <input> Element.

Klassenselektoren

Dieser grundlegende Selektor wählt Elemente anhand ihres class Attributs aus.
Syntax: .classname
Beispiel: .index matcht jedes Element, das die Klasse index besitzt (wahrscheinlich definiert durch ein class="index" Attribut oder ähnliches).

ID-Selektoren

Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres id Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.
Syntax: #idname
Beispiel: #toc matcht das Element, das die ID toc hat (wahrscheinlich definiert durch ein id="toc" Attribut oder ähnliches).

Universalselektoren

Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.
Syntax: * ns|* *|*
Beispiel: * matcht alle Elemente des Dokuments.

Attributselektoren

Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Beispiel: [autoplay] matcht alle Elemente, deren autoplay Attribut (auf einen beliebigen Wert) gesetzt ist.

Kombinatoren

Angrenzende Geschwisterselektoren

Der '+'-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.
Syntax: A + B
Beispiel: h2 + p matcht jedes <p>, das direkt einem <h2> folgt.

Allgemeine Geschwisterselektoren

Der '~'-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.
Syntax: A ~ B
Beispiel: p ~ span matcht alle <span> Elemente, die einem <p> Element innerhalb desselben Elements folgen.

Kindselektoren

Der '>'-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.
Syntax: A > B
Beispiel: ul > li matcht alle <li> Elemente, die innerhalb eines <ul> Element sind.

Nachfahrenselektoren

Der ' '-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.
Syntax: A B
Beispiel: div span matcht jedes <span> Element, das innerhalb eines <div> Elements ist.

Pseudoelemente

Pseudoelemente sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.

Pseudoklassen

Pseudoklassen erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.

Spezifikationen

Browser Kompatibilität