CSS/Tutorials/Selektoren/Pseudoelement

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

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

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

Empfehlung: Nach dem Prinzip der Trennung der Zuständigkeiten sollten Sie bei einer Webseite die Trennung von Inhalt und Präsentation einhalten.
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.

Beispiel für die before- und after-Pseudoelemente ansehen …
<p>Der Begriff <abbr>CSS</abbr> ist eine Abkürzung.</p>

Die Abkürzung CSS wird als abbr-Element ausgezeichnet.

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

Pseudoelement im DOM; Screenshot einer Ansicht im Seiteninspektor

zweites Beispiel für Pseudoelemente ansehen …
<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>

Das Beispiel enthält einen Absatz mit Text und einem abbr-Kindelement, sowie einem Link.

Beispiel 
  
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:

  1. Im p-Element wird ein Blockelement erzeugt, das den Klassennamen (content: attr(class);) des Absatzes enthält.
  2. Der Inhalt des abbr-Elements wird in Sternchen (content: '*';) eingeschlossen.
  3. 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:

Pseudoelemente als Aufzählungszeichen ansehen …
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;.


Empfehlung: Verzichten Sie weitgehend auf eine Positionierung mit position: absolute. Werte, die auf Ihrem Desktop gut aussehen, sind auf anderen Viewports eventuell außerhalb des Darstellungsbereichs oder durch andere Elemente überdeckt.

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 content eines 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.

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.


Beispiel
mögliches Anwendungsbeispiel

Abcdefg

A'bcdefg

'A'bcdefg

[A]bcdefg

{A'}bcdefg

Siehe auch


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

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: 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

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.

Browserunterstützung
caniuse.com
Beispiel 
dialog::backdrop { 
  background: rgb(0 0 0 / 0.5); 
}

Das hinter dem backdrop liegende Dokument wird durch eine schwarze, halb durchscheinende Maske verdeckt.


::selection

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


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

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

Hauptartikel: Formulare/Benutzereingaben zugänglich gestalten

Browserunterstützung
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





Siehe auch

Weblinks

  1. ↑ W3C: css3-selectors#selection
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Selektoren/Pseudoelement&oldid=100350“