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

Syntax

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

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

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

Doppelpunktpaare (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente vonPseudo-Klassen, die in ihrer Notation einen einfachen Doppelpunkt (:) verwenden. Beachten Sie, dass Browser die Syntax mit einem einfachen Doppelpunkt für die ursprünglichen vier Pseudo-Elemente unterstützen:::before,::after,::first-line, und::first-letter.

Pseudo-Elemente existieren nicht unabhängig. Das Element, von dem ein Pseudo-Element Teil ist, wird als seinausgehendes Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten imkomplexen oderzusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das ausgehende Element des Pseudo-Elements. Zum Beispiel können Sie die erste Zeile eines Absatzes mitp::first-line auswählen, jedoch nicht die Kinder der ersten Zeile. Daher istp::first-line > * ungültig.

Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des ausgehenden Elements ausgewählt werden. Zum Beispiel wähltp:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes aus, wenn der Absatz selbst ein Hovering-Effekt zeigt (Pseudo-Klasse).

Typografische Pseudo-Elemente

::first-line

Die erste Zeilen-Box des ausgehenden Elements.

::first-letter

Der erste Buchstabe, die erste Zahl oder das erste Symbolzeichen in der ersten Zeile seines ausgehenden Elements.

::cue

DieWebVTT Hinweise innerhalb eines ausgewählten Elements.Dies kann verwendet werden, umUntertitel und andere Hinweise zu stylen in Medien mit VTT-Tracks.DasCSS-Pseudo-Elemente Modul definiert auch die::postfix und::prefix Sub-Pseudo-Elemente. Diese werden von keinem Browser unterstützt.

Highlight-Pseudo-Elemente

Wählt Dokumentabschnitte basierend auf Inhalt und Dokumentstatus aus und ermöglicht es, diese Bereiche unterschiedlich zu stylen, um den Status dem Benutzer anzuzeigen.

::grammar-error

Ein Textteil, den der Browser für grammatikalisch falsch hält.

::highlight()

Die Elemente imHighlight-Register. Es wird verwendet, um benutzerdefinierte Hervorhebungen zu erstellen.

::search-text

Suchergebnisse, die vom "Find" oder "Find in page"-Textsuch-Feature des Benutzeragents identifiziert werden.

::selection

Der Teil eines Dokuments, der ausgewählt wurde.

::spelling-error

Ein Textteil, den der Browser für falsch geschrieben hält.

::target-text

Das Zielelement des Dokuments. Das Zielelement wird über denFragment-Identifikator der URL identifiziert.

Baumkonforme Pseudo-Elemente

Diese Pseudo-Elemente verhalten sich wie normale Elemente und fügen sich nahtlos in das Boxmodell ein. Sie wirken wie ein Kindelement, das direkt innerhalb der Hierarchie des ausgehenden Elements gestylt werden kann.

::before

Erstellt ein Pseudo-Element, das das erste Kind des ausgewählten Elements ist.

::after

Erstellt ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist.

::column

Jedes Spaltenfragment einesmehrspaltigen Layouts.

::marker

Die automatisch generierte Marker-Box eines Listenelements.

::backdrop

Der Hintergrund des ausgehenden Elements, der in derTop-Schicht gerendert wird.

::scroll-button()

Erstellt einen Button, der das Scrollen desScrollcontainers, auf den es angewendet wird, steuern kann.

::scroll-marker

Erstellt ein Pseudo-Element, das ein Scroll-Marker ist — ein Scrollziel-Button für sein ausgehendes Element, das in einer Scroll-Marker-Gruppe verschachtelt ist.

::scroll-marker-group

Erzeugt einen Container vor oder nach einem Scroll-Container, um die auf dem Element oder seinen Nachkommen generierten::scroll-marker Pseudo-Elemente aufzunehmen.

Auf Elementen basierende Pseudo-Elemente

Diese Pseudo-Elemente sind reale Elemente, die ansonsten nicht selektierbar sind.

::details-content

Der erweiterbare/kollabierbare Inhalt eines<details> Elements.

::part()

Jedes Element innerhalb einesSchattenbaums, das ein entsprechendespart Attribut hat.

::slotted()

Jedes Element, das in einen Slot innerhalb eines HTML-Templates platziert wurde.

Formularbezogene Pseudo-Elemente

Die Pseudo-Elemente beziehen sich auf Formularelemente.

::checkmark

Visiert das Häkchen innerhalb des aktuell ausgewählten<option> Elements einesanpassbaren Auswahl-Elements, um eine visuelle Anzeige, welches ausgewählt wurde, zu geben.

::file-selector-button

Der Button eines<input> vomtype="file".

::picker()

Der Picker-Teil eines Elements, zum Beispiel der Drop-down-Picker einesanpassbaren Auswahl-Elements.

::picker-icon

Das Picker-Icon innerhalb von Formularsteuerelementen, die ein zugeordnetes Symbol haben. Im Fall einesanpassbaren Auswahl-Elements wählt es den Pfeil aus, der nach unten zeigt, wenn das Auswahlfeld geschlossen ist.

::placeholder

Der Platzhaltertext in einem Eingabefeld.

Alphabetischer Index

Durch eine Reihe von CSS-Spezifikationen definierte Pseudo-Elemente umfassen die folgenden:

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue (und::cue())

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Nicht-standardisierte Pseudo-Elemente

Nicht-standardisierte, vendor-spezifische Pseudo-Elemente umfassen:

-moz- Präfix

• ::-moz-color-swatch
• ::-moz-focus-inner
• ::-moz-list-bullet
• ::-moz-list-number
• ::-moz-meter-bar
• ::-moz-progress-bar
• ::-moz-range-progress
• ::-moz-range-thumb
• ::-moz-range-track

-webkit- Präfix

• ::-webkit-inner-spin-button
• ::-webkit-meter-bar
• ::-webkit-meter-even-less-good-value
• ::-webkit-meter-inner-element
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value
• ::-webkit-progress-bar
• ::-webkit-progress-inner-element
• ::-webkit-progress-value
• ::-webkit-scrollbar
• ::-webkit-search-cancel-button
• ::-webkit-search-results-button
• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb

Verschachtelung von Pseudo-Elementen

Sie können einige Pseudo-Element-Selektoren miteinander verketten, um verschachtelte Pseudo-Elemente innerhalb anderer Pseudo-Elemente zu stylen. Die folgenden verschachtelten Pseudo-Element-Kombinationen werden unterstützt:

• ::after
  • ::after::marker: Wählt das::marker Pseudo-Element eines::after Pseudo-Elements aus, wenn::after als Listenelement mitdisplay: list-item gestylt ist.
• ::before
  • ::before::marker: Wählt das::marker Pseudo-Element eines::before Pseudo-Elements aus, wenn::before als Listenelement mitdisplay: list-item gestylt ist.

Schauen Sie sich die einzelnen Referenzseiten zu den Pseudo-Elementen für Beispiele und Informationen zur Browser-Kompatibilität an.

Highlight-Pseudo-Elemente Vererbung

Highlight-Pseudo-Elemente wie::selection,::target-text,::highlight(),::spelling-error und::grammar-error folgen einem konsistenten Vererbungsmodell, das sich von derregulären Elementvererbung unterscheidet.

Wenn Sie Styles auf Highlight-Pseudo-Elemente anwenden, erben sie sowohl von:

1. Ihren Elternelementen (gemäß normaler Vererbung).
2. Den Highlight-Pseudo-Elementen ihrer Elternelemente (gemäß Highlight-Vererbung).

Das bedeutet, dass, wenn Sie sowohl das Highlight-Pseudo-Element eines Elternelements als auch das eines Kindelements stylen, der hervorgehobene Text des Kindes Eigenschaften aus beiden Quellen kombiniert.

Hier ist ein konkretes Beispiel.

Zuerst haben wir etwas HTML, das zwei verschachtelte<div> Elemente enthält. Ein Teil des enthaltenen Textes befindet sich direkt im übergeordneten<div>, und ein Teil ist im untergeordneten<div> verschachtelt.

<div>  Parent text  <div>Child text</div></div>

Als Nächstes fügen wir etwas CSS hinzu, das die Elternelemente und Kind-<div>-Elemente separat auswählt und ihnen unterschiedlichecolor Werte verleiht, sowie den Text des Elternteils und Kindes auswählt (::selection). Dies gibt jedem<div> eine anderebackground-color und setzt eine andere Textfarbe für die Auswahl des Elternteils fest.

/* Style for the parent element */.parent {  color: blue;}/* Style for the parent's selected text */.parent::selection {  background-color: yellow;  color: red;}/* Style for the child element */.child {  color: green;}/* Style for the child's selected text */.child::selection {  background-color: orange;}

Das Beispiel wird wie folgt gerendert:

Versuchen Sie, den Text in beiden Elementen auszuwählen. Beachten Sie, dass:

1. Wenn Sie den Text des Elternteils auswählen, verwendet er den gelben Hintergrund und die rote Textfarbe, die in.parent::selection definiert sind.
2. Wenn Sie den Text des Kindes auswählen, verwendet er:
   • Den orangefarbenen Hintergrund aus.child::selection.
   • Die rote Textfarbe, die vom::selection Pseudo-Element des Elternteils geerbt wird.

Dies zeigt, wie das Highlight-Pseudo-Element des Kindes sowohl von seinem übergeordneten Element als auch vom Highlight-Pseudo-Element des Elternteils erbt.

CSS-Benutzerdefinierte Eigenschaften (Variablen) in Highlight-Pseudo-Elementen erben von ihrem Ursprünglichen Element (dem Element, auf das sie angewendet werden), nicht durch die Highlight-Vererbungskette. Zum Beispiel:

:root {  --selection-color: lightgreen;}::selection {  color: var(--selection-color);}.blue {  --selection-color: blue;}

Die Verwendung des universellen Selektors mit Highlight-Pseudo-Elementen verhindert die Highlighter-Vererbung. Zum Beispiel:

/* This prevents highlight inheritance */*::selection {  color: lightgreen;}/* Prefer this to allow inheritance */:root::selection {  color: lightgreen;}

Spezifikationen

Siehe auch

• CSS-Pseudo-Elemente Modul
• Pseudo-Klassen
• CSS-Selektoren Modul
• Lernen: Pseudo-Klassen und Pseudo-Elemente
• Änderungen bei der Vererbung für CSS-Auswahlstyling - Detaillierte Erklärung der Änderungen im Highlight-Pseudo-Elemente-Vererbungsmodell in Chrome 134