CSS/Tutorials/Selektoren/Pseudoelement
Text-Info
- 30min
- mittel
- Grundkenntnisse in
• HTML
• CSS
Die einfachen Selektoren sind in ihrer Wirkung auf Elemente als Ganzes beschränkt. Bei den Pseudoelementen handelt es sich um Selektoren, die diese Beschränkung aufheben. Ein Pseudoelement erzeugt einen nicht im Elementbaum vorhandenen Abschnitt, der formatiert oder mit Inhalt gefüllt werden kann.
Selektoren, die Pseudoelemente erzeugen, können nur am Ende einer Kette von Selektoren oder alleinstehend notiert werden. In der Regel ist es sinnvoll, Pseudoelemente an einen einfachen Selektor anzuhängen, um ihre Wirkung auf die von diesem Selektor angesprochenen Elemente zu beschränken.
Information: Ein oder zwei Doppelpunkte?
CSS 2 definierte vier Pseudoelemente, die mit einem vorangestellten Doppelpunkt notiert werden. Seit CSS 3 werden alle Pseudoelemente mit zwei vorangestellten Doppelpunkten notiert, damit Pseudoelemente von Pseudoklassen unterschieden werden können.
Inhaltsverzeichnis
::before und ::after
Mit CSS können Webseiten in ihrem Aussehen verändert werden. Häufig will man neben dem Inhalt noch weitere Gestaltungselemente wie Trennlinien, Dekorationsgrafiken, etc. verwenden. Eine Trennlinie kann als thematischer Bruch mit hr ausgezeichnet, aber auch durch ein border-bottom festgelegt werden.
Bilder, die Teil des Inhalts darstellen, werden im HTML eingebunden. Dekorationsgrafiken sollten aber als Hintergrundbild oder mithilfe von Pseudoelementen, die nicht im Markup erscheinen, eingebunden werden.
Dekorationselemente sollten nicht im Markup, sondern nur im CSS verankert werden.
Die Selektoren
erzeugen ein beliebig formatierbares Element, das innerhalb des angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird. Diese stehen vor bzw. nach dem Element und sind im Seiteninspektor (F12) als Kindelemente sichtbar.
Der Inhalt dieser Pseudoelemente kann mit den Eigenschaften für generierte Inhalte erzeugt werden.
<p>Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.</p>
abbr {
background-color: lightgreen;
}
abbr::before,
abbr::after {
content: '*';
}
In diesem Beispiel werden die Pseudoelemente für das abbr-Element erzeugt. Der über die content-Eigenschaft definierte Inhalt wird sowohl vor als auch nach dem Inhalt des Elements eingefügt. Da die Pseudoelemente innerhalb des angesprochenen Elements erzeugt werden, besitzen die Sternchen dieselbe Hintergrundfarbe wie das abbr-Element.
Die von diesen Selektoren erzeugten Elemente erscheinen im DOM der Webseite und können beliebig formatiert werden. Wie bei normalen Elementen gelten für die einzelnen Eigenschaften die Standardwerte. Ausnahme bilden Eigenschaften, die vererbt werden, z. B. Schriftformatierungen.
<p class="Achtung">
Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.
Für weiterführende Informationen schlagen Sie bitte im
<a href="https://wiki.selfhtml.org">Selfhtml-Wiki</a>
nach.
</p>
p {
border: thin solid red;
padding: .5em;
}
p::before {
display: block;
background: red;
color: white;
font: bold 1em sans-serif;
margin: -.5em -.5em .5em -.5em;
padding: .5em;
content: attr(class);
}
abbr {
background: lightgreen;
color: white;
}
abbr::before, abbr::after {
content: "*";
}
a {
color: #780000;
}
a::after {
content: url("https://src.selfhtml.org/dok.gif");
margin-left: .1em;
}
Mit CSS werden die Elemente nun mittels eingefügter Pseudoelemente gestaltet:
- Im
p-Element wird ein Blockelement erzeugt, das den Klassennamen (content: attr(class);) des Absatzes enthält. - Der Inhalt des
abbr-Elements wird in Sternchen (content: '*';) eingeschlossen. - Der Verweis erhält eine Grafik (
content: url(...);).
In HTML/Tutorials/Links/Gestaltung mit CSS sehen Sie, wie Sie interne und externe Links durch SVG-Grafiken kennzeichnen können.
Pseudoelemente als Aufzählungszeichen
HTML bietet einige Aufzählungszeichen für ungeordnete Listen. Sie können diese auch durch Pseudoelemente ersetzen und vielfältig gestalten:
a {
padding: 0 1em;
position: relative;
}
a::before {
content: '';
width: 0;
height: 0;
font-size: 0;
border: thick solid transparent;
border-left-color: currentColor;
position: absolute;
top: 3px;
left: 0;
}
a:hover::before {
background: yellow;
}
li {
list-style-type: none;
line-height: 200%;
}
Links erhalten ein ::before-Pseudoelement. Anders als in den oberen Beispielen bleibt der Wert für content leer. Das Pseudoelement wird in Breite, Höhe und Zeilengröße auf 0 gesetzt, erhält aber einen breiten, transparenten Rand. Nur dem linken Rand wird durch border-left-color: currentColor; der Farbwert currentColor, die aktuelle Textfarbe zugewiesen.
Sie können Pseudoelemente mit position: absolute aus dem Elementfluss herausnehmen und beliebig platzieren. Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position: positioniert wurde. Deshalb erhält das a-Element ein position: relative;.
Mehr über Breiten, Innen- und Außenabstände erfahren Sie im Box-Modell-Tutorial!
Siehe auch
- CSS-Eigenschaft: content
Inhalte für Pseudoelemente erzeugen
- CSS-Eigenschaft: counter-increment
Elemente mit Hilfe von CSS-Zählern durchnummerieren
- Clearfix
Auflösen eines Floats mit dem Pseudoelement
::after - CSS-Funktion: attr()
Attributwerte auslesen und als
contenteines Pseudoelements ausgeben - HTML-Tutorials: Links
- Links mit Symbolen kennzeichnen
- externe und interne Links
- Rahmen und Ribbons
- Wichtiges mit Rahmen hervorheben
- Ribbons (Hintergrundbänder mit Pseudoelementen erzeugen)
- box-shadow und filter
::first-letter
Das Pseudoelement ::first-letter spricht das erste Zeichen eines Elements zusammen mit dessen vorangestellter und nachfolgender Punktierung an. Es kann auf Block- und blockähnliche Elemente (inline-block, Listenpunkte, Tabellenüberschriften und -zellen) angewendet werden.
Im zweiten Absatz wird sowohl das Sternchen, da es als Punktierung zählt, als auch die Ziffer „1“ in grüner Schriftfarbe dargestellt.
Im dritten Absatz wird das Sternchen mit grüner Schriftfarbe dargestellt. In diesem Beispiel ist die Zeichenfolge, die normalerweise von::first-letter formatiert wird, durch ein Element getrennt. CSS stellt dem Browser frei, wie er damit umgeht. Entweder werden nur die nicht voneinander abgeschnittenen Zeichen formatiert oder die jeweiligen Abschnitte einzeln.Folgende Eigenschaften können auf das first-letter-Pseudoelement angewendet werden: Innen- und Außenabstände, Rahmen, Hintergründe, Schriftbild, Textformatierung, float und vertical-align (diese aber nur, wenn float nicht verwendet wird).
Darüber hinaus darf der Browser Zeilenhöhe, Höhe und Breite des Elements eigenständig an die enthaltenen Zeichen anpassen. Die Anwendbarkeit anderer Eigenschaften liegt im Ermessen der Browserhersteller.
Abcdefg
A'bcdefg
'A'bcdefg
[A]bcdefg
{A'}bcdefgSiehe auch
- CSS/Tutorials/Initialen kunstvolle Gestaltung der Anfangsbuchstaben mit CSS
::first-line
Mit dem Pseudoelement ::first-line wird die erste Zeile eines Textes angesprochen. Dieses Pseudoelement zeigt nur Wirkung bei Block- und blockähnlichen Elementen (inline-block, Listenpunkte, Tabellenüberschriften und -zellen).
Auf das first-line-Pseudoelement können Formatierungen des Schriftbildes und des Textes sowie Eigenschaften für Hintergründe angewendet werden. Die Anwendbarkeit anderer Eigenschaften liegt im Ermessen der Browserhersteller.
Der zu formatierende Text muss nicht direkt innerhalb des angesprochenen Elements notiert sein, er kann auch innerhalb eines verschachtelten Blockelements vorkommen. blockquote::first-line würde bei der Struktur „<blockquote><p>Text“ also ebenfalls den Text formatieren. Ausnahme bilden Nachfahrenelemente, die als inline-block dargestellt werden, diese werden nie vom first-line eines Vorfahren formatiert.
Textbestandteile der ersten Zeile, die aus dem Elementfluss herausgenommen wurden – beispielsweise durch float oder position – werden nicht formatiert.
::backdrop
Das ::backdrop Pseudoelement kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Toplayers versteckt. Das ::backdrop-Pseudoelement liegt zwischen dem obersten Element, z. B: einer Dialog-Box, und den anderen Elementen im Hintergrund.
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
::selection
Mit dem Pseudoelement ::selection kann die Vorder- und Hintergrundfarbe von ausgewählten Elementen (z. B. markiertem Text) bestimmt werden.
p.selection::selection {
color: black;
background-color: gold;
}
<h2>Browsereinstellung</h2>
<p>Markieren Sie Text in diesem Absatz, ...</p>
<h2>eigene Vorgaben</h2>
<p class="selection">Für diesen Absatz gelten Vorgaben des Autorenstylesheets.</p>
selection-Pseudoelement so formatiert, dass die Schriftfarbe schwarz bleibt, die Hintergrundfarbe jedoch auf gold gesetzt wird. Zugleich wird der Unterschied zu den Browser-Einstellungen sichtbar.Auf das selection-Pseudoelement können lediglich Vordergrund- und Hintergrundfarbe angewendet werden.
selection-Pseudoelement immer so, dass einerseits der Kontrast zu nicht markiertem Text, andererseits der Kontrast zwischen Schrift- und Hintergrundfarbe stark genug ist, damit keine Beeinträchtigung der Benutzbarkeit entsteht.Dieses Pseudoelement gehört nicht zum CSS-Standard, obwohl es ursprünglich dafür vorgesehen war.[1] Aufgrund des nicht hinreichend definierten Verhaltens wurde das Element jedoch aus der CSS3-Empfehlung entfernt.
Das Verhalten der einzelnen Browser ist teilweise sehr unterschiedlich. Safari und Chrome markieren neben der eigentlichen Auswahl auch die leeren Räume zwischen den Elementen, formatieren dabei aber nur die tatsächlich vorhandenen Elemente mit der selection-Definition.
::selection sollte aufgrund des nicht definierten Verhaltens stets gut überlegt werden. Empfehlenswert ist der Verzicht, so lange kein detailliertes Verhalten standardisiert wird.::placeholder
Mit dem Pseudoelement ::placeholder können Sie festlegen, wie der Text des Platzhalters formatiert wird.
::placeholder {
color: currentColor;
opacity: 1;
text-align: right;
}
Siehe auch
::part
Das Pseudoelement ::part() entspricht denjenigen Elementen eines Shadow DOM, deren part-Attribut die in den Klammern von ::part() angegebenen Part-Namen enthält. Sie können auf diese Weise in das Shadow DOM eines Elements hineingreifen und darin Elemente mit CSS formatieren.
#shadowhost::part(p1) {
color: red;
}
<div id="shadowhost">
</div>
let host = document.getElementById("shadowhost");
host.attachShadow({ mode: "open" });
host.innerHTML = "<p part='p1 q7 f6'>Hier ist Part 1<p>";
Das Script erzeugt im shadowhost-div ein Shadow DOM und darin ein p Element. Das p Element bekommt drei part-Namen: p1, q7 und f6. Im Stylesheet wird im Shadow DOM des #shadowhost Elements ein Element gesucht, das den Partnamen p1 enthält, und rot gefärbt.
Partnamen sind ähnlich wie Klassen zu sehen. Das Shadow DOM ist aber vom normalen DOM abgeschirmt und seine innere Struktur soll nicht sichtbar sein. Deshalb kann man nicht mit normalen Selektoren hineingreifen. Das ::part()-Pseudoelement bietet einen begrenzten Zugriff.
Siehe auch
Weblinks
- WHATWG: Fullscreen API: ::backdrop
- MDN: ::backdrop
