1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. Pseudo-Elemente

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Pseudo-Elemente

Ein CSS Pseudo-Element ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird und es Ihnen ermöglicht, einen bestimmten Teil des ausgewählten Elements(s) zu stylen.

Hinweis: Diese Seite ist ein Index aller Pseudo-Elemente in CSS. Die Seite CSS Pseudo-Elemente führt das Modul ein, das einige, aber nicht alle dieser Pseudo-Elemente definiert.

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;
}

Doppelpunkte (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente von Pseudo-Klassen, die in ihrer Notation einen einfachen Doppelpunkt (:) verwenden. Beachten Sie, dass Browser die Einfachkolonsyntax 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 ein Teil ist, wird als sein ausgehendes Element bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das ausgehende 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. Also ist p::first-line > * ungültig.

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

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

Typografische Pseudo-Elemente

::first-line

Die erste Zeilen-Box des ausgehenden Elements.

::first-letter

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

::cue

Die WebVTT Cues innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Cues zu stylen in Medien mit VTT-Tracks. Das CSS Pseudo-Elemente Modul definiert außerdem die ::postfix und ::prefix Sub-Pseudo-Elemente. Diese werden von keinem Browser unterstützt.

Highlight Pseudo-Elemente

Selektiert Dokumentabschnitte basierend auf Inhalt und Dokumentstatus und ermöglicht es, diese Bereiche unterschiedlich zu stylen, um diesen Status dem Nutzer anzuzeigen.

::selection

Der Teil eines Dokuments, der ausgewählt wurde.

::target-text

Das Ziel-Element des Dokuments. Das Ziel-Element wird mithilfe des Fragment-Identifiers der URL identifiziert.

::spelling-error

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

::grammar-error

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

::highlight()

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

Baumkonforme Pseudo-Elemente

Diese Pseudo-Elemente verhalten sich wie reguläre Elemente, die sich nahtlos in das Box-Modell einfügen. Sie agieren als 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 eines Mehrspaltenlayouts.

::marker

Die automatisch generierte Marker-Box eines Listenelements.

::backdrop

Der Hintergrund des ausgehenden Elements, dargestellt in der oberen Schicht.

::scroll-button()

Erstellt einen Button, der das Scrollen des Scroll-Containers steuert, auf den er angewendet wird.

::scroll-marker

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

::scroll-marker-group

Generiert einen Container vor oder nach einem Scroll-Container, um die von dem Element oder seinen Nachfahren generierten ::scroll-marker Pseudo-Elemente zu enthalten.

Elementgestützte Pseudo-Elemente

Diese Pseudo-Elemente sind echte Elemente, die sonst nicht auswählbar sind.

::details-content

Die ein- und ausblendbaren Inhalte eines <details> Elements.

::part()

Jedes Element innerhalb eines Shadow-Baums, das ein passendes part Attribut hat.

::slotted()

Jedes Element, das in einem Slot innerhalb einer HTML-Vorlage platziert ist.

Formularbezogene Pseudo-Elemente

Die Pseudo-Elemente sind mit Formularelementen verbunden.

::checkmark

Zielt auf das Häkchen im derzeit ausgewählten <option>-Element eines anpassbaren Auswahlelements, um eine visuelle Anzeige des ausgewählten Elements zu bieten.

::file-selector-button

Der Button eines <input> vom type="file".

::picker()

Der Auswahlteil eines Elements, zum Beispiel der Drop-Down-Auswähler eines anpassbaren Auswahlelements.

::picker-icon

Das Auswahl-Icon innerhalb der Formularelemente, die ein zugeordnetes Symbol haben. Im Fall eines anpassbaren Auswahlelements wählt es den Pfeil aus, der nach unten zeigt, wenn die Auswahl geschlossen ist.

::placeholder

Der Platzhaltertext in einem Eingabefeld.

Alphabetischer Index

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

A

B

C

D

F

G

H

M

P

S

T

V

Nicht-standardisierte Pseudo-Elemente

Nicht-standardisierte, mit Anbieter-Präfix versehenen Pseudo-Elemente umfassen:

-moz- Präfix

-webkit- Präfix

Pseudo-Elemente verschachteln

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

Sehen Sie sich die einzelnen Referenzseiten der Pseudo-Elemente 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 der regulären Elementvererbung unterscheidet.

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

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

Das bedeutet, dass, wenn Sie sowohl ein Highlight Pseudo-Element eines Elternelements als auch das eines Kindelements stylen, der Text des Kindelements hervorgehoben wird, indem Eigenschaften aus beiden Quellen kombiniert werden.

Hier ist ein konkretes Beispiel.

Zuerst haben wir etwas HTML, das zwei verschachtelte <div> Elemente enthält. Ein Teil des enthaltenen Textinhalts befindet sich direkt innerhalb des Elternelements <div>, und ein Teil ist innerhalb des Kindelements <div> verschachtelt.

html
<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

Anschließend fügen wir etwas CSS hinzu, das die übergeordneten und untergeordneten <div> Elemente separat auswählt und ihnen unterschiedliche color Werte gibt, und wählt den ausgewählten Text des Eltern- und Kindelements (::selection). Dies gibt jedem <div> eine andere background-color und setzt eine andere Textfarbe auf der Elternauswahl.

css
/* 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, Eltern- und Kindelemente, auszuwählen. Beachten Sie, dass:

  1. Wenn Sie den Text des Elternelements auswählen, wird der gelbe Hintergrund und die rote Textfarbe verwendet, die in .parent::selection definiert sind.
  2. Wenn Sie den Text des Kindelements auswählen, wird verwendet:
    • Der orange Hintergrund von .child::selection.
    • Die rote Textfarbe, die vom ::selection Pseudo-Element des Elternteils geerbt wird.

Dies zeigt, wie das Highlight Pseudo-Element des Kindelements sowohl von seinem Elternteil als auch vom Highlight Pseudo-Element des Elternteils erbt.

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

css
:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

Bei der Verwendung des universellen Selektors mit Highlight Pseudo-Elementen wird die Highlight-Vererbung verhindert. Zum Beispiel:

css
/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

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

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden