10.1 Pseudoklassen
Pseudoklassen und Pseudoelemente in HTML und CSS erlauben es dir, Elemente basierend auf ihrem Zustand oder Inhalt zu stylen, ohne zusätzliche Klassen hinzuzufügen oder die Struktur des HTML-Dokuments zu verändern. Sie bieten coole Werkzeuge, um interaktive und ästhetisch ansprechende Webseiten zu erstellen.
Pseudoklassen werden auf Elemente basierend auf ihrem Zustand oder ihrer Position in der Dokumentstruktur angewendet. Sie helfen dabei, Elemente in verschiedenen Situationen zu stylen, wie z.B. beim Hover, Fokus oder bei ausgewählten Elementen. Pseudoklassen beginnen mit einem Doppelpunkt (:).
Die einfachsten Pseudoklassen:
Die Pseudoklasse :hover wird auf ein Element angewendet, wenn der Benutzer mit der Maus darüber fährt.
<button type="button">Button</button>
button:hover {
color: red;
}
Die Pseudoklasse :focus wird auf ein Element angewendet, wenn es den Fokus erhält, z.B. beim Klicken auf ein Eingabefeld.
<input type="text">
input:focus {
outline-color: blue;
}
Die Pseudoklasse :active wird auf ein Element angewendet, wenn es aktiv ist, z.B. beim Klicken auf einen Link oder Button.
<button type="button">Button</button>
button:active {
background-color: green;
}
Die Pseudoklasse :visited wird auf Links angewendet, die der Benutzer bereits besucht hat.
<a href="#">Link</a>
a:visited {
color: purple;
}
10.2 Pseudoelemente
Pseudoelemente erlauben es dir, Teile von Elementen zu stylen, die keine separaten HTML-Elemente sind. Sie beginnen mit zwei Doppelpunkten (::). Pseudoelemente werden verwendet, um Inhalte vor oder nach einem Element einzufügen und zu stylen, die erste Zeile oder den ersten Buchstaben eines Elements hervorzuheben und andere Aufgaben zu erfüllen.
Die einfachsten Pseudoelemente:
Das Pseudoelement ::before fügt Inhalte vor dem Inhalt eines Elements ein.
<p>Ich heiße Stepan.</p>
p::before {
content: "Hallo! ";
color: blue;
}
Das Pseudoelement ::after fügt Inhalte nach dem Inhalt eines Elements ein.
<p>Achtung!</p>
p::after {
content: " Danke für deine Aufmerksamkeit!";
color: red;
}
Das Pseudoelement ::first-line wird auf die erste Zeile eines Elements angewendet. Es erlaubt, nur die erste Zeile des Textes zu stylen.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
Das Pseudoelement ::selection wird auf den vom Benutzer ausgewählten Text angewendet.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Versuch mal, den Text im Ergebnis auszuwählen.
10.3 Beispiele für die Verwendung von Pseudoelementen
Pseudoklassen und Pseudoelemente in HTML und CSS bieten großartige Möglichkeiten, Elemente basierend auf ihrem Zustand oder Inhalt zu stylen. Sie ermöglichen die Erstellung von interaktiveren und visuell ansprechenderen Webseiten, ohne die HTML-Struktur zu ändern.
Beispiel 1: Einfügen eines Symbols vor dem Linktext
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Dies ist ein Link mit Symbol</a>
</body>
</html>
Beispiel 2: Hinzufügen eines gestylten Blocks nach einem Absatz
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Dies ist ein Absatz Text.</p>
</body>
</html>
Kombinieren
Pseudoklassen und Pseudoelemente können kombiniert werden, um komplexe und leistungsstarke Stile zu erstellen.
Beispiel: Stilierung des ausgewählten Textes innerhalb eines Links bei hover
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Wähle diesen Text aus und fahre dann mit der Maus darüber.</a>
</body>
</html>
GO TO FULL VERSION