CSS-Pseudoelemente


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Was sind Pseudoelemente?

Ein CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu formatieren.

Es kann beispielsweise verwendet werden, um:

  • Gestalten Sie den ersten Buchstaben oder die erste Zeile eines Elements

  • Fügen Sie Inhalte vor oder nach dem Inhalt eines Elements ein


Syntax

Die Syntax von Pseudoelementen:

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

Das ::first-line-Pseudoelement

Das Pseudoelement ::first-line wird verwendet, um einen speziellen Stil hinzuzufügen zur ersten Zeile eines Textes.

Das folgende Beispiel formatiert die erste Zeile des Textes in allen <p> Elemente:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>


Hinweis: Das Pseudoelement ::first-line kann nur auf Blockebene angewendet werden Elemente.

Die folgenden Eigenschaften gelten für die ::first-line Pseudoelement:

  • Schriftarteigenschaften

  • Farbeigenschaften

  • Hintergrundeigenschaften

  • Wortabstände

  • Buchstaben-Abstand

  • Textdekoration

  • vertikal ausrichten

  • Texttransformation

  • Zeilenhöhe

  • klar

Beachten Sie die Doppelpunkt-Notation - ::first-line versus :first-line

Der Doppelpunkt ersetzt den Einzelpunkt Notation für Pseudoelemente in CSS3. Dies war ein Versuch des W3C zwischen Pseudoklassen unterscheiden und Pseudoelemente.

Es wurde die Ein-Doppelpunkt-Syntax verwendet für Pseudoklassen und Pseudoelemente in CSS2 und CSS1.

Für Aufgrund der Abwärtskompatibilität ist die Single-Colon-Syntax für CSS2 und CSS1 akzeptabel Pseudoelemente.



Das ::first-letter-Pseudoelement

Das Pseudoelement ::first-letter wird verwendet, um dem ersten einen speziellen Stil hinzuzufügen Buchstabe eines Textes.

Das folgende Beispiel formatiert den ersten Buchstaben des Textes in allen <p> Elemente:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>


Hinweis: Das Pseudoelement ::first-letter kann nur auf Blockebene angewendet werden Elemente.

Die folgenden Eigenschaften gelten für das Pseudoelement ::first-letter:

  • Schriftarteigenschaften

  • Farbeigenschaften

  • Hintergrundeigenschaften

  • Randeigenschaften

  • Polstereigenschaften

  • Grenzeigenschaften

  • Textdekoration

  • Vertical-Alignment (nur wenn „float“ „none“ ist)

  • Texttransformation

  • Zeilenhöhe

  • schweben

  • klar


Pseudoelemente und HTML-Klassen

Pseudoelemente können mit HTML-Klassen kombiniert werden:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  
</style>
</head>
<body>

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

</body>
</html>


Im obigen Beispiel wird der erste Buchstabe von Absätzen mit class="intro" angezeigt rot und in einer größeren Größe.


Mehrere Pseudoelemente

Es können auch mehrere Pseudoelemente kombiniert werden.

Im folgenden Beispiel wird der erste Buchstabe eines Absatzes rot sein, in eine xx-große Schriftgröße. Der Rest der ersten Zeile ist blau und in Small-Caps. Der Rest des Absatzes hat die Standardschriftgröße und -farbe:

Beispiel

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

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>



CSS - Das ::before-Pseudoelement

Das Pseudoelement ::before kann verwendet werden, um Inhalte vor dem Inhalt eines Elements einzufügen.

Im folgenden Beispiel wird vor dem Inhalt jedes <h1>-Elements ein Bild eingefügt:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>



CSS - Das ::after-Pseudoelement

Das Pseudoelement ::after kann verwendet werden, um Inhalte nach dem Inhalt eines Elements einzufügen.

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

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>



CSS - Das ::marker-Pseudoelement

Das Pseudoelement ::marker wählt das aus Markierungen von Listenelementen.

Im folgenden Beispiel werden die Markierungen von Listenelementen formatiert:

Beispiel

::marker { 
  color: red;
  font-size: 23px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

</body>
</html>



CSS - Das ::selection-Pseudoelement

Das Pseudoelement ::selection stimmt mit dem Teil eines Elements überein, der es ist von einem Benutzer ausgewählt werden.

Die folgenden CSS-Eigenschaften können auf ::selection angewendet werden: Farbe, Hintergrund, Cursor und Umriss.

Das folgende Beispiel macht den ausgewählten Text rot auf gelbem Hintergrund:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>




Alle CSS-Pseudoelemente

::after

Beispiel

p::after

Beispielbeschreibung

Fügen Sie nach dem Inhalt jedes <p>-Elements etwas ein

::before

Beispiel

p::before

Beispielbeschreibung

Fügen Sie vor dem Inhalt jedes <p>-Elements etwas ein

::first-letter

Beispiel

p::first-letter

Beispielbeschreibung

Wählt den ersten Buchstaben jedes <p>-Elements aus

::first-line

Beispiel

p::first-line

Beispielbeschreibung

Wählt die erste Zeile jedes <p>-Elements aus

::marker

Beispiel

::marker

Beispielbeschreibung

Wählt die Markierungen von Listenelementen aus

::selection

Beispiel

p::selection

Beispielbeschreibung

Wählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird

Alle CSS-Pseudoklassen

:active

Beispiel

a:active

Beispielbeschreibung

Wählt den aktiven Link aus

:checked

Beispiel

input:checked

Beispielbeschreibung

Wählt jedes aktivierte <input>-Element aus

:disabled

Beispiel

input:disabled

Beispielbeschreibung

Wählt jedes deaktivierte <input>-Element aus

:empty

Beispiel

p:empty

Beispielbeschreibung

Wählt jedes <p>-Element aus, das keine untergeordneten Elemente hat

:enabled

Beispiel

input:enabled

Beispielbeschreibung

Wählt jedes aktivierte <input>-Element aus

:first-child

Beispiel

p:first-child

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist

:first-of-type

Beispiel

p:first-of-type

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das erste <p>-Element seines übergeordneten Elements ist

:focus

Beispiel

input:focus

Beispielbeschreibung

Wählt das <input>-Element aus, das den Fokus hat

:hover

Beispiel

a:hover

Beispielbeschreibung

Wählt Links beim Überfahren mit der Maus aus

:in-range

Beispiel

input:in-range

Beispielbeschreibung

Wählt -Elemente mit einem Wert innerhalb eines angegebenen Bereichs aus

:invalid

Beispiel

input:invalid

Beispielbeschreibung

Wählt alle <input>-Elemente mit einem ungültigen Wert aus

:lang(language)

Beispiel

p:lang(it)

Beispielbeschreibung

Wählt jedes <p>-Element mit einem lang-Attributwert aus, der mit „it“ beginnt.

:last-child

Beispiel

p:last-child

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist

:last-of-type

Beispiel

p:last-of-type

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das letzte <p>-Element seines übergeordneten Elements ist

:link

Beispiel

a:link

Beispielbeschreibung

Wählt alle nicht besuchten Links aus

:not(selector)

Beispiel

:not(p)

Beispielbeschreibung

Wählt jedes Element aus, das kein <p>-Element ist

:nth-child(n)

Beispiel

p:nth-child(2)

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist

:nth-last-child(n)

Beispiel

p:nth-last-child(2)

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist, gezählt vom letzten untergeordneten Element

:nth-last-of-type(n)

Beispiel

p:nth-last-of-type(2)

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das zweite <p>-Element seines übergeordneten Elements ist, gezählt vom letzten untergeordneten Element

:nth-of-type(n)

Beispiel

p:nth-of-type(2)

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das zweite <p>-Element seines übergeordneten Elements ist

:only-of-type

Beispiel

p:only-of-type

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das einzige <p>-Element seines übergeordneten Elements ist

:only-child

Beispiel

p:only-child

Beispielbeschreibung

Wählt jedes <p>-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist

:optional

Beispiel

input:optional

Beispielbeschreibung

Wählt <input>-Elemente ohne „erforderliches“ Attribut aus

:out-of-range

Beispiel

input:out-of-range

Beispielbeschreibung

Wählt -Elemente mit einem Wert außerhalb eines angegebenen Bereichs aus

:read-only

Beispiel

input:read-only

Beispielbeschreibung

Wählt <input>-Elemente mit einem angegebenen „readonly“-Attribut aus

:read-write

Beispiel

input:read-write

Beispielbeschreibung

Wählt <input>-Elemente ohne „readonly“-Attribut aus

:required

Beispiel

input:required

Beispielbeschreibung

Wählt <input>-Elemente mit einem angegebenen „erforderlichen“ Attribut aus

:root

Beispiel

root

Beispielbeschreibung

Wählt das Stammelement des Dokuments aus

:target

Beispiel

#news:target

Beispielbeschreibung

Wählt das aktuell aktive #news-Element aus (auf eine URL geklickt, die diesen Ankernamen enthält)

:valid

Beispiel

input:valid

Beispielbeschreibung

Wählt alle <input>-Elemente mit einem gültigen Wert aus

:visited

Beispiel

a:visited

Beispielbeschreibung

Wählt alle besuchten Links aus