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 Attribut attribute aus.
element[attribute="value"]
Elemente element mit dem Attribut attribute aus, dessen Wert value ist.
element[attribute~="value"]
Elemente element mit dem Attribut attribute aus, dessen Wert value in einer durch Leerzeichen getrennten Liste enthält.
element[attribute|="value"]
Elemente element mit dem Attribut attribute aus, dessen durch Trennstriche - getrennte Werteliste mit value beginnt.
element[attribute^="value"]
Elemente element mit dem Attribut attribute aus, dessen Wert mit value beginnt.
element[attribute$="value"]
Elemente element mit dem Attribut attribute aus, dessen Wert auf value endet.
element[attribute*="value"]
Elemente element mit dem Attribut attribute aus, dessen Wert die Zeichenkette value 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 eines element1 vorkommen.
Kindselektoren (child selectors) element1>element2
wählen Elemente element2 aus, die direkte Unterelemente eines element1 sind.
Beispiel: p>strong
Angrenzende Geschwister-Selektoren (adjacent sibling selectors) element1+element2
wählen Elemente element2 aus, die unmittelbar auf ein anderes Element element1 folgen.
Beispiel: h1+p
Allgemeine Geschwister-Selektoren (general sibling selectors) element1~element2
wählen Elemente element2 aus, die auf ein anderes Element element1 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 elements aus
element:first-line
wählt die erste Zeile des elements 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.