CSS/Tutorials/Selektoren/Pseudoelement

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
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.
Während für die in CSS 2 definierten Pseudoelemente beide Schreibweisen möglich sind, kann für neuere Pseudoelemente nur die neue Schreibweise verwendet werden.


Empfehlung: Verwenden Sie für Pseudoelemente immer die Notation mit zwei Doppelpunkten. Alle Browser (incl. IE9+) verstehen dies.

::before und ::after[Bearbeiten]

Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, das innerhalb des angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird. Der Inhalt dieser Elemente kann mit den Eigenschaften für generierte Inhalte erzeugt werden.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Beispiel für die before- und after-Pseudoelemente ansehen …
<style> abbr {background-color: lightgreen;} abbr::before, abbr::after {content: '*';} </style> </head> <body> <p>Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.</p> </body>

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.

Pseudoelement im DOM

Beachten Sie: Ältere Code-Beispiele enthalten oft das Pseudoelement :after, alle Browser ab IE9 verstehen die richtige Schreibweise mit den doppelten Doppelpunkten des Standards.

Siehe auch

::first-letter[Bearbeiten]

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.

  • CSS 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiele für das first-letter-Pseudoelement</title> <style> p::first-letter {color: green;} </style> </head> <body> <p>Auf das erste Zeichen kommt es an.</p> <p>*1 ist ein verbreiteter Code in Telefonsystemen.</p> <p><span>*</span>1 ist ein verbreiteter Code in Telefonsystemen.</p> </body> </html>
Im ersten Absatz wird der Buchstabe „A“ in grüner Schriftfarbe dargestellt. Es wird als einziges Zeichen formatiert, da es nicht von Punktierung umgeben ist.

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.

Beachten Sie: Der Internet Explorer kennt bis Version 8 nur die Schreibweise mit einfachem Doppelpunkt (:first-letter).
Beispiel
mögliches Anwendungsbeispiel

Abcdefg

A'bcdefg

'A'bcdefg

[A]bcdefg

{A'}bcdefg

Siehe auch


::first-line[Bearbeiten]

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).

  • CSS 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für das first-line-Pseudoelement</title> <style> p {width: 10em;} p::first-line {font-weight: bold;} </style> </head> <body> <h1>Das Pseudoelement <code>first-line</code></h1> <p>Dieser Absatz ist sehr lang, damit er die Wirkung des first-line-Pseudoelements demonstrieren kann.</p> </body> </html>
In diesem Beispiel wurde die Breite des Absatzelements stark begrenzt, sodass der Text mehrere Zeilenumbrüche enthält. first-line spricht jeden Text an, der vor dem ersten Zeilenumbruch steht. Die Worte „Dieser Absatz ist sehr“ plus/minus ein Wort werden daher in fett formatierter Schrift dargestellt.

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.

Beachten Sie: Der Internet Explorer kennt bis Version 8 nur die Schreibweise mit einfachem Doppelpunkt („:first-line“).

Das Anwenden von Formatierungen auf Text in einem verschachtelten Element funktioniert bisher nur im Opera Browser und im Internet Explorer ab Version 8.

inline-block-Elemente, die von ::first-line formatierten Text umschließen, aber Nachfahre eines Elements sind, auf das entsprechende ::first-line-Formatierungen wirken, werden nach oben genannten Regeln nicht formatiert. Mit Ausnahme des Safari formatieren jedoch alle Browser den Inhalt des inline-block-Elements mit den in ::first-line gesetzen Eigenschaften und das auch dann, wenn sich der Text innerhalb des inline-block-Elements bricht.

::backdrop[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel
dialog::backdrop { 
  background: rgba(0,0,0,0.5); 
}
Das hinter dem backdrop liegende Dokument wird durch eine schwarze, halb durchscheinende Maske verdeckt.

::selection[Bearbeiten]

Mit dem Pseudoelement ::selection kann die Vorder- und Hintergrundfarbe von ausgewählten Elementen (z. B. markiertem Text) bestimmt werden.

  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
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>
In diesem Beispiel wurde das 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.

Empfehlung: Formatieren Sie das 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.

Hinweis

Der Einsatz des Pseudoelements ::selection sollte aufgrund des nicht definierten Verhaltens stets gut überlegt werden. Empfehlenswert ist der Verzicht, so lange kein detailliertes Verhalten standardisiert wird.

::placeholder[Bearbeiten]

Mit dem Pseudoelement ::placeholder können Sie festlegen, wie der Text des Platzhalters formatiert wird.

  • Edge
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

Beispiel ansehen …
::placeholder {
  color: currentColor;
  opacity: 1;
  text-align: right;
}
Die Platzhaltertexte werden nach rechts gerückt und in derselben Farbe wie auch der eingegebene Text angezeigt.

Siehe auch


::part[Bearbeiten]

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Beispiel
#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.

Quellen[Bearbeiten]

  1. W3C: css3-selectors#selection


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]