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?
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.
Inhaltsverzeichnis
::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.
<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.
:after, alle Browser ab IE9 verstehen die richtige Schreibweise mit den doppelten Doppelpunkten des Standards.<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(...);).
Siehe auch
- CSS-Eigenschaft: content (Inhalte für Pseudoelemente erzeugen)
- CSS-Eigenschaft: counter-increment (Elemente mit Hilfe von CSS-Zählern durchnummerieren)
- Clearfix (Clearance eines Floats mit dem Pseudoelement ::after)
- Mithilfe der attr()-Funktion Attributwerte auslesen und mittels content in einem Pseudoelement ausgeben.
- HTML/Tutorials/Links/Gestaltung mit CSS
::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.
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.
:first-letter).Abcdefg
A'bcdefg
'A'bcdefg
[A]bcdefg
{A'}bcdefgSiehe auch
- CSS/Tutorials/Initialen kunstvolle Gestaltung der Anfangsbuchstaben mit CSS
::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).
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.
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.
Details: caniuse.com
dialog::backdrop {
background: rgba(0,0,0,0.5);
}
::selection[Bearbeiten]
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.
Hinweis
::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.
Details: caniuse.com
::placeholder {
color: currentColor;
opacity: 1;
text-align: right;
}
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.
Details: caniuse.com
#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]
Siehe auch[Bearbeiten]
Weblinks[Bearbeiten]
- WHATWG: Fullscreen API: ::backdrop
- MDN: ::backdrop
