CSS-Selektoren im Überblick
Diese Übersicht listet alle Selektoren auf, die im CSS Standard definiert sind. Diese werden nicht von allen Browsern unterstützt, auch wenn sich die Browserunterstützung in den letzten Jahren stark verbessert hat.
Basisselektoren
Folgende Selektoren wählen Elemente direkt nach ihrem Typ oder ihren Eigenschaften aus:
- Universalselektor (universal selector)
*
- wählt alle Elemente aus.
- Attributselektoren (attribute selectors)
attribute["value"]
- wählen Elemente in Abhängigkeit von deren Attributen oder Attributwerten aus, und zwar
element[attribute]
- Elemente
element
mit dem Attributattribute
aus. element[attribute="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen Wertvalue
ist. element[attribute~="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen Wertvalue
in einer durch Leerzeichen getrennten Liste enthält. element[attribute|="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen durch Trennstriche-
getrennte Werteliste mitvalue
beginnt. element[attribute^="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen Wert mitvalue
beginnt. element[attribute$="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen Wert aufvalue
endet. element[attribute*="value"]
- Elemente
element
mit dem Attributattribute
aus, dessen Wert die Zeichenkettevalue
enthält.
- Elementtypselektoren (type selectors)
element
- wählen alle Elemente eines Typs aus.
Beispiel:h1
- Klassenselektoren (class selectors)
.class
- wählen alle Elemente aus, bei denen die Klasse im Attribut
class
enthalten ist.
Beispiel:.Klasse
- ID-Selektoren (ID selectors)
#id
- wählen alle Elemente mit einer bestimmten ID aus (also maximal eins pro Dokument).
Beispiel:#footer
Kombinierte Selektoren
Folgende Selektoren wählen Elemente in Abhängigkeit ihrer Stellung zu anderen Elemente aus:
- Nachfahrenselektoren (descendant selecors)
element1 element2
- wählen Elemente
element2
aus, die innerhalb eineselement1
vorkommen. - Kindselektoren (child selectors)
element1>element2
- wählen Elemente
element2
aus, die direkte Unterelemente eineselement1
sind.
Beispiel:p>strong
- Angrenzende Geschwister-Selektoren (adjacent sibling selectors)
element1+element2
- wählen Elemente
element2
aus, die unmittelbar auf ein anderes Elementelement1
folgen.
Beispiel:h1+p
- Allgemeine Geschwister-Selektoren (general sibling selectors)
element1~element2
- wählen Elemente
element2
aus, die auf ein anderes Elementelement1
folgen.
Tabellenselektoren
Mit Tabellenselektoren lassen sich bestimmte Tabellenzellen-Gruppen gezielt auswählen:
table:row[n]
- wählt die n-te Reihe der Tabelle aus.
table:column[n]
- wählt die n-te Spalte der Tabelle aus.
table:row[%n]
- wählt jede n-te Reihe der Tabelle aus.
table:row[%n+m]
- wählt jede n-te Reihe ab der m-ten Reihe der Tabelle aus.
Pseudo-Elemente
element:after
- erzeugt ein Element nach dem
element
element:before
- erzeugt ein Element vor dem
element
element:first-letter
- wählt das erstes Zeichen des
element
s aus element:first-line
- wählt die erste Zeile des
element
s aus (nur für Blockelemente)
Pseudo-Klassen
element:active
- aktives Element
:first-child
- erstes Kindelement
element:focus
- fokussiertes Element
element:hover
- mit der Maus überfahrendes Element
element:lang(...)
- Sprachauswahl mit Sprachenkürzel
:left
- linke Seite bei wechselseitigem Ausdruck
:right
- rechte Seite bei wechselseitigem Ausdruck
a:link
- nicht besuchte Hyperlinks
a:visited
- besuchte Hyperlinks