Pseudo-Elemente

Ein CSS Pseudo-Element ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, um einen spezifischen Teil der ausgewählten Elemente zu stylen.

Syntax

css
selector::pseudo-element {
  property: value;
}

Zum Beispiel kann ::first-line verwendet werden, um die Schriftart der ersten Zeile eines Absatzes zu ändern.

css
/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Doppelte Doppelpunkte (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente von Pseudo-Klassen, die in ihrer Notation einen einzelnen Doppelpunkt (:) verwenden.

Pseudo-Elemente existieren nicht unabhängig. Das Element, von dem ein Pseudo-Element ein Teil ist, wird als auslösendes Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das auslösende Element des Pseudo-Elements. Zum Beispiel kann die erste Zeile eines Absatzes mit p::first-line ausgewählt werden, aber nicht die Kinder der ersten Zeile. Daher ist p::first-line > * ungültig.

Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des auslösenden Elements ausgewählt werden. Zum Beispiel wählt p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes, wenn der Absatz selbst gehovt wird (Pseudo-Klasse).

Hinweis: Wenn eine Selektorliste einen ungültigen Selektor enthält, wird der gesamte Stilblock ignoriert.

Liste der Pseudo-Elemente

Pseudo-Elemente, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen folgende:

A

B

C

F

G

H

M

P

S

T

V

Hinweis: Browser unterstützen die Syntax mit einem Doppelpunkt nur für die ursprünglichen vier Pseudo-Elemente: ::before, ::after, ::first-line, und ::first-letter.

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
CSS Positioned Layout Module Level 4
CSS Shadow Parts
WebVTT: The Web Video Text Tracks Format

Siehe auch