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