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: ul + li matcht jedes <li>, das direkt einem <ul> 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

Spezifikation Status Kommentar
Selectors Level 4 Arbeitsentwurf  
Selectors Level 3 Empfehlung  
CSS Level 2 (Revision 1) Empfehlung  
CSS Level 1 Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1 1.0 (1.7 oder früher) 3.0 3.5 1.0
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.5 1.0 (1.9.2) ? ? 3.2

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,