8.1 Grundlegende Konzepte
Das Kombinieren von Pseudoklassen und Pseudoelementen in CSS ermöglicht das Erstellen von leistungsstarken und flexiblen Selektoren zur Stilgestaltung von Elementen abhängig von ihrem Zustand, ihrer Struktur und ihrem Inhalt. Dies eröffnet viele Möglichkeiten zur Erstellung komplexer und dynamischer Stile, die die Benutzeroberfläche und das Interaktionserlebnis mit der Webseite verbessern.
Grundlagen der Kombination
Pseudoklassen
Pseudoklassen werden durch ein Doppelpunkt (:) gekennzeichnet und auf Elemente abhängig von ihrem Zustand oder ihrer Position angewendet. Zum Beispiel:
:hover— wird angewendet, wenn der Mauszeiger über ein Element fährt:first-child— wählt das erste Kindelement des Elternteils
Pseudoelemente
Pseudoelemente werden durch zwei Doppelpunkte (::) gekennzeichnet und zur Stilgestaltung von Teilen von Elementen oder zur Hinzufügung von Inhalten verwendet. Zum Beispiel:
::before— fügt Inhalt vor einem Element hinzu::first-letter— stilisiert den ersten Buchstaben eines Elements
Kombinieren
Pseudoklassen und Pseudoelemente können kombiniert werden, um komplexe Selektoren zu erstellen, die es ermöglichen, Elemente abhängig von ihrem Zustand und ihrer Struktur zu gestalten.
Syntax:
selektor:pseudoklasse::pseudoelement {
eigenschaften: werte;
}
8.2 Kombinieren für Interaktivität
Beispiel 1: Stilisierung des ersten Buchstabens bei Hover
In diesem Beispiel wird der erste Buchstabe eines Absatzes vergrößert und rot gefärbt, wenn der Mauszeiger über den Absatz fährt:
/* Stil des ersten Buchstabens bei Hover über den Absatz */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Beispiel 2: Hinzufügen von Inhalt vor einem Link bei Fokus
In diesem Beispiel wird ein Symbol vor einem Link hinzugefügt und blau gefärbt, wenn der Link den Fokus erhält:
/* Hinzufügen eines Symbols vor einem Link bei Fokus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Kombinieren für die Strukturierung
Beispiel 3: Stil des ersten Absatzes innerhalb eines div mit zusätzlichem Inhalt
In diesem Beispiel wird die erste Zeile des ersten Absatzes innerhalb eines div fett hervorgehoben und grün gefärbt:
/* Stil der ersten Zeile des ersten Absatzes innerhalb eines div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Beispiel 4: Hinzufügen eines dekorativen Elements nach dem letzten Listenelement
In diesem Beispiel wird ein dekoratives Element nach dem letzten Listenelement hinzugefügt und rot gefärbt:
/* Hinzufügen eines dekorativen Elements nach dem letzten Listenelement */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Kombinieren für komplexe Bedingungen
Beispiel 5: Stil der geraden Listenelemente bei Hover
In diesem Beispiel erhalten gerade Listenelemente einen hellgrauen Hintergrund und blaue Schriftfarbe, wenn der Mauszeiger darüber fährt:
/* Stil der geraden Listenelemente bei Hover über den Cursor */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Beispiel 6: Stil der aktiven Links, die bereits besucht wurden
In diesem Beispiel werden bereits besuchte Links, die sich im aktiven Zustand befinden, orange gefärbt und unterstrichen:
/* Stil der aktiven Links, die bereits besucht wurden */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Beispiel für eine vollständige Implementierung
/* Stil der ersten Zeile des ersten Absatzes innerhalb eines div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Hinzufügen eines dekorativen Elements nach dem letzten Listenelement */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Stil der geraden Listenelemente bei Hover über den Cursor */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Hinzufügen eines Symbols vor einem Link bei Fokus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Stil des ersten Buchstabens bei Hover über den Absatz */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für das Kombinieren von Pseudoklassen und Pseudoelementen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Das ist der erste Absatz innerhalb eines div.</p>
<p>Das ist der zweite Absatz innerhalb eines div.</p>
</div>
<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
<li>Listenelement 3</li>
<li>Listenelement 4</li>
</ul>
<a href="#">Link mit Symbol bei Fokus</a>
<p>Fahre über diesen Absatz, um den Effekt auf dem ersten Buchstaben zu sehen.</p>
</body>
</html>
GO TO FULL VERSION