CSS-Pseudo-Element

Was ist ein Pseudo-Element?

CSS Pseudo-Elemente werden verwendet, um die Stile eines bestimmten Teils des Elements festzulegen.

Zum Beispiel kann es verwendet werden, um:

  • Stile für den ersten Buchstaben und die erste Zeile des Elements festlegen
  • Inhalte vor oder nach dem Inhalt des Elements einfügen

Syntax

Syntax der Pseudo-Elemente:

selector::Pseudo-Element {
  Eigenschaft: Wert;
}

::first-line Pseudo-Element

::first-line Pseudo-Elemente werden verwendet, um spezielle Stile an der ersten Zeile des Textes hinzuzufügen.

Das folgende Beispiel fügt allen <p>-Elementen die Stile der ersten Zeile hinzu:

Beispiel

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Probieren Sie es selbst aus

Beachtung:::first-line Pseudo-Elemente können nur auf Block-Elemente angewendet werden.

Nachfolgende Eigenschaften gelten für ::first-line Pseudo-Element:

  • Schriftart-Eigenschaften
  • Farbeigenschaften
  • Hintergrund-Eigenschaften
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Bitte beachten SieDouble-Colon-Syntax - ::first-line Gegensatz :first-line

In CSS3 wird das Double-Colon die Einzelpfeilsyntax der Pseudo-Elemente ersetzt. Dies ist der Versuch der W3C, zu unterscheidenPseudo-KlassenundPseudo-ElementeVersuche.

In CSS2 und CSS1 werden Pseudo-Klassen und Pseudo-Elemente mit der Einzelpfeilsyntax verwendet.

Um Rückwärtskompatibilität zu gewährleisten, akzeptieren CSS2 und CSS1 Pseudo-Elemente die Einzelpfeilsyntax.

::first-letter Pseudo-Element

::first-letter Pseudo-Elemente werden verwendet, um spezielle Stile an den ersten Buchstaben des Textes hinzuzufügen.

Das folgende Beispiel stellt die Formatierung der ersten Buchstaben des Textes aller <p>-Elemente ein:

Beispiel

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Probieren Sie es selbst aus

Beachtung:::first-letter Pseudo-Elemente gelten nur für Block-Elemente.

Nachfolgende Eigenschaften gelten für den Pseudo-Element ::first-letter:

  • Schriftart-Eigenschaften
  • Farbeigenschaften
  • Hintergrund-Eigenschaften
  • Außenabstandseigenschaften
  • Innenabstandseigenschaften
  • Border-Eigenschaften
  • text-decoration
  • vertical-align (nur wenn "float" "none" ist)
  • text-transform
  • line-height
  • float
  • clear

Pseudo-Elemente und CSS-Klassen

Pseudo-Elemente können mit CSS-Klassen kombiniert werden:

Beispiel

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Probieren Sie es selbst aus

Der obige Beispiel zeigt die Anfangsbuchstaben der Absätze mit der Klasse "intro" in rot und großer Schriftgröße an.

Mehrere Pseudo-Elemente

Es können auch mehrere Pseudo-Elemente kombiniert werden.

Im folgenden Beispiel wird der erste Buchstabe des Absatzes rot und in xx-große Schriftgröße angezeigt. Der Rest der ersten Zeile wird blau und in kleinen Grossbuchstaben angezeigt. Der Rest des Absatzes wird in der Standardgröße und Farbe angezeigt:

Beispiel

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Probieren Sie es selbst aus

CSS - ::before Pseudo-Element

::before Pseudo-Elemente können verwendet werden, um Inhalte vor dem Elementinhalt einzufügen.

Der folgende Beispiel fügt ein Bild vor dem Inhalt jedes <h1>-Elements ein:

Beispiel

h1::before {
  content: url(smiley.gif);
}

Probieren Sie es selbst aus

CSS - ::after Pseudo-Element

::after Pseudo-Elemente können verwendet werden, um Inhalte nach dem Elementinhalt einzufügen.

Der folgende Beispiel fügt ein Bild nach dem Inhalt jedes <h1>-Elements ein:

Beispiel

h1::after {
  content: url(smiley.gif);
}

Probieren Sie es selbst aus

CSS - ::selection Pseudo-Element

::selection Pseudo-Elemente passen die ausgewählten Elemente an.

Nachfolgende CSS-Attribute können auf Pseudo-Elemente angewendet werden ::selection:

  • color
  • background
  • cursor
  • outline

Der folgende Beispiel zeigt, wie ausgewählter Text auf einem gelben Hintergrund in Rot angezeigt wird:

Beispiel

::selection {
  color: red; 
  background: yellow;
}

Probieren Sie es selbst aus

Alle CSS-Selektoren

Selektor Beispiel Beschreibung des Beispiels
::after p::after Fügen Sie Inhalte nach jedem <p>-Element ein.
::before p::before Fügen Sie Inhalte vor jedem <p>-Element ein.
::first-letter p::first-letter Wählen Sie die erste Buchstabe jedes <p>-Elements.
::first-line p::first-line Wählen Sie die erste Zeile jedes <p>-Elements.
::selection p::selection Wählen Sie den ausgewählten Teil des Elements.

Alle CSS-Pseudo-Klassen

Selektor Beispiel Beschreibung des Beispiels
:active a:active Wählen Sie den aktiven Link.
:checked input:checked Wählen Sie jedes ausgewählte <input>-Element.
:disabled input:disabled Wählen Sie jedes deaktivierte <input>-Element.
:empty p:empty Wählen Sie jedes <p>-Element, das keine Kindelemente hat.
:enabled input:enabled Wählen Sie jedes aktivierte <input>-Element.
:first-child p:first-child Wählen Sie jeden <p>-Element, der der erste Kindelement des Elternelements ist.
:first-of-type p:first-of-type Wählen Sie jeden <p>-Element, der der erste <p>-Element des Elternelements ist.
:focus input:focus Wählen Sie das <input>-Element, das den Fokus hat.
:hover a:hover Wählen Sie den Link, über den der Mauszeiger sich befindet.
:in-range input:in-range Wählen Sie alle <input>-Elemente mit Werten in einem bestimmten Bereich.
:invalid input:invalid Wählen Sie alle <input>-Elemente mit ungültigen Werten.
:lang(language) p:lang(it) Wählen Sie jedes <p>-Element, dessen Wert des Attributs lang mit "it" beginnt.
:last-child p:last-child Wählen Sie jeden <p>-Element, der der letzte Kindelement des Elternelements ist.
:last-of-type p:last-of-type Wählen Sie jeden <p>-Element, der der letzte <p>-Element des Elternelements ist.
:link a:link Wählen Sie alle nicht besuchten Links.
:not(selector) :not(p) Wählen Sie jedes Element, das kein <p>-Element ist.
:nth-child(n) p:nth-child(2) Wählen Sie jedes <p>-Element, das der zweite Kindelement des Elternelements ist.
:nth-last-child(n) p:nth-last-child(2) Wählen Sie jeden <p>-Element, das der zweite Kindelement des Elternelements ist, beginnend vom letzten Kindelement.
:nth-last-of-type(n) p:nth-last-of-type(2) Wählen Sie jedes <p>-Element als das zweite Kind seines Elternelements aus, gezählt von dem letzten Kind aus.
:nth-of-type(n) p:nth-of-type(2) Wählen Sie jedes <p>-Element als das zweite Kind seines Elternelements aus.
:only-of-type p:only-of-type Wählen Sie jedes <p>-Element als einziges Kind seines Elternelements aus.
:only-child p:only-child Wählen Sie das <p>-Element als einziges Kind seines Elternelements aus.
:optional input:optional Wählen Sie das <input>-Element ohne die "required"-Eigenschaft aus.
:out-of-range input:out-of-range Wählen Sie das <input>-Element mit einem Wert außerhalb des angegebenen Bereichs aus.
:read-only input:read-only Wählen Sie das <input>-Element mit der "readonly"-Eigenschaft aus.
:read-write input:read-write Wählen Sie das <input>-Element ohne die "readonly"-Eigenschaft aus.
:required input:required Wählen Sie das <input>-Element mit der "required"-Eigenschaft aus.
:root root Wählen Sie den Wurzelelement des Elements aus.
:target #news:target Wählen Sie das aktuelle aktive #news-Element aus (klicken Sie auf die URL, die den Anchor-Namen enthält).
:valid input:valid Wählen Sie alle <input>-Elemente mit gültigen Werten aus.
:visited a:visited Wählen Sie alle besuchten Links aus.