Einfache Selektoren

Selektor	Syntax	Beispiel	Funktion
Typselektor	elementname	p	Wählt alle Elemente eines bestimmten HTML-Tags aus
Klassenselektor	.klassenname	.highlight	Wählt alle Elemente mit der angegebenen Klasse aus
ID-Selektor	#id	#header	Wählt das Element mit der angegebenen ID aus
Universalselektor	*	*	Wählt alle Elemente aus

Kombinatorische Selektoren

Selektor	Syntax	Beispiel	Funktion
Nachfahren-Selektor	selector1 selector2	div p	Wählt alle Nachfahren-Elemente aus (alle Ebenen)
Kind-Selektor	selector1 > selector2	ul > li	Wählt nur direkte Kindelemente aus
Geschwister-Selektor	selector1 ~ selector2	h2 ~ p	Wählt alle nachfolgenden Geschwister-Elemente aus
Unmittelbarer Geschwister-Selektor	selector1 + selector2	h2 + p	Wählt nur das unmittelbar folgende Geschwister-Element aus

Attributselektoren

Selektor	Syntax	Beispiel	Funktion
Attribut-Selektor	[attribut]	[disabled]	Wählt Elemente mit dem angegebenen Attribut
Attributwert-Selektor	[attribut=“wert“]	[type=“text“]	Wählt Elemente mit dem exakten Attributwert
Attributwert-enthält-Selektor	[attribut*=“wert“]	[class*=“btn“]	Wählt Elemente, deren Attributwert den angegebenen Teilstring enthält
Attributwert-beginnt-mit-Selektor	[attribut^=“wert“]	[href^=“https“]	Wählt Elemente, deren Attributwert mit dem angegebenen String beginnt
Attributwert-endet-mit-Selektor	[attribut$=“wert“]	[href$=“.pdf“]	Wählt Elemente, deren Attributwert mit dem angegebenen String endet

Pseudoklassen

Selektor	Syntax	Beispiel	Funktion
Zustandsselektoren	:zustand	:hover, :active, :focus	Wählen Elemente in bestimmten Zuständen aus
Strukturelle Pseudoklassen	:struktur	:first-child, :nth-child(n)	Wählen Elemente basierend auf ihrer Position im DOM
Negationsselektor	:not(selector)	p:not(.special)	Wählt Elemente aus, die nicht vom angegebenen Selektor erfasst werden