Übersicht: CSS-Selektoren

von

Es gibt unterschiedliche Möglichkeiten HTML-Elemente im CSS zu adressieren. Die Art der Adressierung bestimmt die Gewichtung gegenüber anderen Regeln für das selbe Element.

Diese Übersicht in in folgende Gruppen gegliedert:

  1. Grundlegende Selektoren
  2. Kombinatoren (Beziehungen zwischen Elementen)
  3. Pseudo-Klassen (Zustände & Struktur)
  4. Pseudo-Elemente
  5. Pseudo-Klassen für Formulare
  6. Moderne und Funktionsselektoren

1. Grundlegende Selektoren

Selector (English)Beschreibung (Deutsch)Beispiel
* (Universal Selector)Wählt alle Elemente.* { margin: 0; }
element (Type Selector)Wählt alle Elemente dieses Typs (Tag).p { color: blue; }
.class (Class Selector)Wählt alle Elemente mit dieser Klasse..btn { background: green; }
#id (ID Selector)Wählt das Element mit dieser ID (eindeutig).#header { padding: 10px; }
[attribute]Wählt Elemente mit einem bestimmten Attribut.[title] { cursor: help; }
[attribute="value"]Attributwert muss genau „value“ sein.[type="text"] { width: 200px; }
[attribute^="value"]Attributwert beginnt mit „value“.[href^="https"] { color: blue; }
[attribute$="value"]Attributwert endet auf „value“.[src$=".png"] { border: 1px solid; }
[attribute*="value"]Attributwert enthält „value“.[class*="error"] { color: red; }
[attribute~="value"]Attributwert enthält Wort (durch Leerzeichen getrennt).[class~="active"] { font-weight: bold; }
`[attribute=“value“]`Attributwert ist genau oder beginnt mit value- (z. B. lang).

2. Kombinatoren (Beziehungen zwischen Elementen)

Selector (English)BeschreibungBeispiel
A B (Descendant)Wählt Nachfahren von A (beliebige Tiefe).div p { color: gray; }
A > B (Child)Wählt direkte Kinder von A.ul > li { list-style: none; }
A + B (Adjacent Sibling)Wählt das direkt folgende Geschwisterelement.h2 + p { margin-top: 0; }
A ~ B (General Sibling)Wählt alle folgenden Geschwisterelemente.h2 ~ p { color: green; }
A, B (Group Selector)Kombiniert mehrere Selektoren.h1, h2 { font-weight: bold; }

3. Pseudo-Klassen (Zustände & Struktur)

Selector (English)BeschreibungBeispiel
:hoverMauszeiger befindet sich über dem Element.a:hover { text-decoration: underline; }
:activeElement wird gerade aktiviert (z. B. geklickt).button:active { transform: scale(0.95); }
:focusElement befindet sich im Fokus.input:focus { border-color: blue; }
:focus-visibleFokus sichtbar (z. B. Tastatur-Navigation).button:focus-visible { outline: 2px solid blue; }
:first-childErstes Kindelement eines Elternteils.li:first-child { font-weight: bold; }
:last-childLetztes Kindelement.li:last-child { color: red; }
:nth-child(n)N-tes Kindelement (Formel möglich).tr:nth-child(odd) { background: #f9f9f9; }
:nth-last-child(n)N-tes Kindelement vom Ende her gezählt.tr:nth-last-child(1) { color: gray; }
:only-childElement ist das einzige Kind.div p:only-child { text-align: center; }
:first-of-typeErstes Element eines Typs im Elternteil.p:first-of-type { margin-top: 0; }
:last-of-typeLetztes Element eines Typs.p:last-of-type { margin-bottom: 0; }
:nth-of-type(n)N-tes Element eines Typs.li:nth-of-type(2) { color: blue; }
:emptyWählt Elemente ohne Inhalt.p:empty { display: none; }
:not(selector)Wählt Elemente, die nicht dem Selektor entsprechen.div:not(.active) { opacity: 0.5; }

4. Pseudo-Elemente

Selector (English)BeschreibungBeispiel
::beforeFügt Inhalt vor dem Element hinzu.p::before { content: "→ "; }
::afterFügt Inhalt nach dem Element hinzu.p::after { content: " ✓"; }
::first-letterFormatiert den ersten Buchstaben.p::first-letter { font-size: 2em; }
::first-lineFormatiert die erste Zeile.p::first-line { font-weight: bold; }
::selectionFormatiert markierten Text.::selection { background: yellow; }
::markerFormatiert Listenpunkte.li::marker { color: red; }
::placeholderStil des Platzhaltertexts in Inputs.input::placeholder { color: gray; }

5. Pseudo-Klassen für Formulare

Selector (English)BeschreibungBeispiel
:checkedCheckbox oder Radio ist aktiviert.input:checked + label { font-weight: bold; }
:disabledElement ist deaktiviert.input:disabled { opacity: 0.5; }
:enabledElement ist aktiv (nicht disabled).input:enabled { border-color: green; }
:requiredPflichtfeld in Formular.input:required { border-color: red; }
:optionalOptionales Formularfeld.input:optional { color: gray; }
:validFormularfeld ist gültig.input:valid { border-color: green; }
:invalidFormularfeld ist ungültig.input:invalid { border-color: red; }
:in-rangeEingabewert im erlaubten Bereich.input:in-range { background: lightgreen; }
:out-of-rangeEingabewert außerhalb des Bereichs.input:out-of-range { background: pink; }
:placeholder-shownPlatzhaltertext wird angezeigt.input:placeholder-shown { color: gray; }

6. Moderne und Funktionsselektoren

Selector (English)BeschreibungBeispiel
:is(A, B, C)Wählt Elemente, die einem der Selektoren entsprechen.:is(h1, h2, h3) { margin: 0; }
:where(A, B, C)Wie :is(), aber mit keiner Gewichtung in der Spezifität.:where(article, section) { padding: 1rem; }
:has(selector)Wählt Eltern, die ein bestimmtes Kind enthalten (elternbasiert).div:has(img) { border: 1px solid; }
:rootWählt das Wurzelelement (<html>).:root { --main-color: #333; }
:scopeWählt das aktuelle Bezugselement im DOM-Kontext.:scope > p { color: red; }
:targetWählt das Ziel eines URL-Ankers (#id).section:target { background: yellow; }

7. Links

CSS-Tricks: https://css-tricks.com/css-selectors/