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
Die Syntax von Pseudoelementen:
selector::pseudo-element {
property: value;
}
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:
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 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:
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 können mit HTML-Klassen kombiniert werden:
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.
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:
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>
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:
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>
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:
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>
Das Pseudoelement ::marker
wählt das aus Markierungen von Listenelementen.
Im folgenden Beispiel werden die Markierungen von Listenelementen formatiert:
::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>
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:
::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>
Beispiel
p::after
Beispielbeschreibung
Fügen Sie nach dem Inhalt jedes <p>-Elements etwas ein
Beispiel
p::before
Beispielbeschreibung
Fügen Sie vor dem Inhalt jedes <p>-Elements etwas ein
Beispiel
p::first-letter
Beispielbeschreibung
Wählt den ersten Buchstaben jedes <p>-Elements aus
Beispiel
p::first-line
Beispielbeschreibung
Wählt die erste Zeile jedes <p>-Elements aus
Beispiel
::marker
Beispielbeschreibung
Wählt die Markierungen von Listenelementen aus
Beispiel
p::selection
Beispielbeschreibung
Wählt den Teil eines Elements aus, der von einem Benutzer ausgewählt wird
Beispiel
a:active
Beispielbeschreibung
Wählt den aktiven Link aus
Beispiel
input:checked
Beispielbeschreibung
Wählt jedes aktivierte <input>-Element aus
Beispiel
input:disabled
Beispielbeschreibung
Wählt jedes deaktivierte <input>-Element aus
Beispiel
p:empty
Beispielbeschreibung
Wählt jedes <p>-Element aus, das keine untergeordneten Elemente hat
Beispiel
input:enabled
Beispielbeschreibung
Wählt jedes aktivierte <input>-Element aus
Beispiel
p:first-child
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist
Beispiel
p:first-of-type
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das erste <p>-Element seines übergeordneten Elements ist
Beispiel
input:focus
Beispielbeschreibung
Wählt das <input>-Element aus, das den Fokus hat
Beispiel
a:hover
Beispielbeschreibung
Wählt Links beim Überfahren mit der Maus aus
Beispiel
input:in-range
Beispielbeschreibung
Wählt
Beispiel
input:invalid
Beispielbeschreibung
Wählt alle <input>-Elemente mit einem ungültigen Wert aus
Beispiel
p:lang(it)
Beispielbeschreibung
Wählt jedes <p>-Element mit einem lang-Attributwert aus, der mit „it“ beginnt.
Beispiel
p:last-child
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist
Beispiel
p:last-of-type
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das letzte <p>-Element seines übergeordneten Elements ist
Beispiel
a:link
Beispielbeschreibung
Wählt alle nicht besuchten Links aus
Beispiel
:not(p)
Beispielbeschreibung
Wählt jedes Element aus, das kein <p>-Element ist
Beispiel
p:nth-child(2)
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist
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
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
Beispiel
p:nth-of-type(2)
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das zweite <p>-Element seines übergeordneten Elements ist
Beispiel
p:only-of-type
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das einzige <p>-Element seines übergeordneten Elements ist
Beispiel
p:only-child
Beispielbeschreibung
Wählt jedes <p>-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist
Beispiel
input:optional
Beispielbeschreibung
Wählt <input>-Elemente ohne „erforderliches“ Attribut aus
Beispiel
input:out-of-range
Beispielbeschreibung
Wählt
Beispiel
input:read-only
Beispielbeschreibung
Wählt <input>-Elemente mit einem angegebenen „readonly“-Attribut aus
Beispiel
input:read-write
Beispielbeschreibung
Wählt <input>-Elemente ohne „readonly“-Attribut aus
Beispiel
input:required
Beispielbeschreibung
Wählt <input>-Elemente mit einem angegebenen „erforderlichen“ Attribut aus
Beispiel
root
Beispielbeschreibung
Wählt das Stammelement des Dokuments aus
Beispiel
#news:target
Beispielbeschreibung
Wählt das aktuell aktive #news-Element aus (auf eine URL geklickt, die diesen Ankernamen enthält)
Beispiel
input:valid
Beispielbeschreibung
Wählt alle <input>-Elemente mit einem gültigen Wert aus
Beispiel
a:visited
Beispielbeschreibung
Wählt alle besuchten Links aus