Pseudoelemente sind Elemente, die nicht von HTML erfasst, aber dennoch mit CSS-Angaben versehen werden können, z.B. die erste Textzeile in einem Element oder der erste Buchstabe eines Bereichs. Alle Pseudoelemente haben die gleiche Syntax, sie beginnen mit einem zweifachen :: (Doppelpunkt), woran sich das festgelegte Schlüsselwort anschließt. Für ältere Pseudo-Elemente ist noch die Syntax mit einem vorangestellten Doppelpunkt möglich (z. B. :first.line), das selection-Element existiert erst seit CSS3 und muss mit zwei Doppelpunkten geschrieben werden,
| Pseudo-Element | Beschreibung | Anwendungen |
| ::first-line | spricht die erste Zeile eines Elements an | font-Eigenschaften, color-Eigenschaften, background-Eigenschaften, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear |
| ::first-letter | spricht den ersten Buchstaben eines Elements an | font-Eigenschaften, color-Eigenschaften, background-Eigenschaften, margin-Eigenschaften, padding-Eigenschaften, border-Eigenschaften, text-decoration, vertical-align (ohne "float"), text-transform, line-height, float, clear |
| ::before | fügt Inhalt vor dem Element ein | mit der content-Eigenschaft kann nahezu jedes Element eingefügt werden |
| ::after | fügt Inhalt nach dem Element ein | mit der content-Eigenschaft kann nahezu jedes Element eingefügt werden |
| ::selection | ändert markierten Bereich | color-Eigenschaften, background-Eigenschaften, cursor-Eigenschaften, outline-Eigenschaften. |
Mit dem ::first-line-Element spricht man die erste Zeile eines Elements an. Im Beispiel wird jede erste Zeile eines p-Elements mit roter Schrift und Kapitälchen formatiert.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Mit dem ::first-letter-Element spricht man den ersten Buchstaben eines Elements an. Im Beispiel wird der erste Buchstabe eines p-Elements mit roter Schrift und xx-large formatiert (Initiale).
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Mit den ::before bzw. ::after-Element werden Inhalte vor bzw. nach einem HTML-Element eingefügt. Im Beispiel wird vor jedem h1-Element ein Bild eingefügt. In der Regel benötigen sie für diese Pseudo-Elemente das content-Attribut von CSS.
h1::before {
content: url(icon.gif);
}
Mit dem ::selection-Element kann für eine Markierung eine Formatierung bestimmt werden. Im Beispiel wird markierter Text rot mit gelben Hintergrund sein. Für Firefox muss man proprietäre Eigenschaften verwenden.
::-moz-selection {
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
Auch die Verwendung Multipler Pseudo-Elemente ist möglich.
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Mit der content-Eigenschaft können Inhalte für die Pseudoelemente before und after erzeugt werden. counter-increment und counter-reset sind Eigenschaften für eine Textgliederung im Dokument.
| Eigenschaft | Bedeutung | Wertzuweisung |
| content | Inhalt für ::before und ::after | normal, none, counter, attr, string, open-quote, close-quote, no-open-quote, no-close-quote, url, initial, inherit |
| counter-reset | Variablendeklaration | none, name number, initial, inherit |
| counter-increment | fortlaufende Nummerierung | none, id initial, inherit |
Mit der content-Eigenschaft bestimmen sie den Inhalt für ::before und ::after Elemente z.B. Text (string).
div::after {
content: 'Hallo Welt';
}
Im Beispiel wird dem Link der Attributwert vom Attribut href vorangestellt. Die Ausgabe sieht wie folgt aus:
http://www.adiprinz.at(CSS mit Adi Prinz)
a::before
{
content:attr(href);
}
<!--HTML-->
<a href="http://www.adiprinz.at">(CSS mit Adi Prinz)</a>
Im Beispiel wird jedem Absatz das Bild smiley.gif vorangestellt.
p::before
{
content:url(smiley.gif);
}
Mit der counter-reset-Eigenschaft wird eine Zählervariable generiert.
Im Beispiel bekommt die Zählervariable den Namen x und den Wert 1.
Da das body-Element im Dokument nur einmal vorkommt, wird die Zählervariable und deren Wert nur einmal erstellt.
body {
counter-reset: x 0;
}
h1::before {
content: counter(x) ". ";
}
Mit der counter-increment-Eigenschaft wird einer bestehenden Zählervariable (Counter) eine fortlaufende Nummerierung zugewiesen. Mit der counter-increment-Eigenschaft wird Name und Wert, die dem Zähler hinzugefügt werden soll angefügt. Falls nicht angegeben, wird 1 verwendet.
body {
counter-reset: x 0;
}
h1::before {
counter-increment: x 1;
content: counter(x) ". ";
}
Das folgende Beispiel erstellt eine Gliederung auf drei Ebenen für die Überschriften h1, h2 und h3 in Form von "1", "1.1", "1.1.1".
body {
counter-reset: x 0;
}
h1 {
counter-reset: y 0;
}
h2 {
counter-reset: z 0;
}
h1::before {
counter-increment: x 1;
content: counter(x) " ";
}
h2::before {
counter-increment: y 1;
content: counter(x) "." counter(y) " ";
}
h3::before {
counter-increment: z 1;
content: counter(x) "." counter(y) "." counter(z) " ";
}
Pseudoklassen sind Selektoren, die ein Element ansprechen, wenn es eine bestimmte Eigenschaft besitzt. Diese Eigenschaften sind vielfältig wie z.B. Benutzeraktionen, oder der Status des Elements wie z.B. das erste Vorkommen im HTML-Dokument. Pseudoklassen werden immer mit einem vorangestelltem Doppelpunkt (:) geschrieben.
Wenn man die folgenden drei Beispiele genau ansieht merkt man, dass alle drei dasselbe bedeuten.
/*Erstes Beispiel*/
a { color: red; }
a:link { color: blue; }
/*Zweites Beispiel*/
a { color: blue; }
a:visited { color: red; }
/*Drittes Beispiel*/
a:link { color: blue; }
a:visited { color: red; }
/*Formatierung des Verweisziels (Anker)*/
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
p:hover, h1:hover, a:hover {
background-color: yellow;
}
a:active {
background-color: yellow;
}
input:focus {
background-color: yellow;
}
input[type="text"]:disabled {
background: #dddddd;
}
:root {
background: #ff0000;
}
p:empty {
background: #ff0000;
}
ul li:first-child {
border: 3px solid blue;
}
body p:nth-child(3) {
background: #ff0000;
}
Quelle: W3Schools.com
p:nth-child(odd) {
background: #ff0000;
}
p:nth-child(even) {
background: #0000ff;
}
p:nth-child(3n+0) {
background: #ff0000;
}
Für weitere Informationen über Pseudo-Klassen und -Elemente schauen sie sich folgende Scripts an!
CSS hat mehrere neue Pseudoklassen eingeführt, die die Auswahl und das Styling von Elementen basierend auf bestimmten Bedingungen vereinfachen und erweitern. Einige dieser Pseudoklassen sind noch nicht vollständig in allen Browsern implementiert, daher sollte ihre Verwendung mit Bedacht erfolgen. Hier sind einige der wichtigsten neuen Pseudoklassen:
/* Beispiel für :has()
Die container-Klasse erhält eine grüne Umrandung, wenn sie ein Kind-Element mit der Klasse child enthält. */
.container:has(.child) {
border: 2px solid green;
}
/* Beispiel für :is()
Alle p-Elemente mit der Klasse important oder highlight werden rot gefärbt. */
p:is(.important, .highlight) {
color: red;
}
/* Beispiel für :where()
Alle p-Elemente mit der Klasse note oder info erhalten einen hellgelben Hintergrund. */
p:where(.note, .info) {
background-color: lightyellow;
}
/* Beispiel für :not()
Alle li-Elemente, die nicht die Klasse active haben, werden grau gefärbt. */
li:not(.active) {
color: gray;
}