Pseudo-Elemente

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

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 einen einzelnen Doppelpunkt (:) in ihrer Notation verwenden.

Pseudo-Elemente existieren nicht unabhängig. Das Element, von dem ein Pseudo-Element ein Teil ist, wird als sein ursprüngliches Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das ursprüngliche Element des Pseudo-Elements. Zum Beispiel können Sie die erste Zeile eines Absatzes mit p::first-line auswählen, aber nicht die Kinder der ersten Zeile. Daher ist p::first-line > * ungültig.

Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des ursprünglichen Elements ausgewählt werden. Zum Beispiel wählt p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes aus, wenn der Absatz selbst von der Maus berührt 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 Folgendes:

A

B

C

F

G

H

M

P

S

T

V

Hinweis: Browser unterstützen die Syntax mit einem einzigen 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