Dies ist eine alte Version des Dokuments!
LU02.A03 - Pseudo-Klassen
Aufgabe 1: Theoriefragen zu Pseudo-Klassen
Beantworte die folgenden Fragen zu CSS-Pseudo-Klassen:
- Was ist eine CSS-Pseudo-Klasse? Erkläre den Unterschied zwischen einer normalen Klasse und einer Pseudo-Klasse.
- Welche Pseudo-Klasse wird verwendet, um das Styling eines Links zu ändern, wenn die Maus darüberfährt?
- Mit welcher Pseudo-Klasse kann ein Element gezielt werden, das den Fokus hat (z. B. ein Input-Feld)?
- Welche Pseudo-Klassen ermöglichen es, das erste und das letzte Kind eines übergeordneten Elements zu stylen?
- Erkläre den Unterschied zwischen
nth-child(n)undnth-of-type(n).
Rahmenbedingungen
| Was | Beschreibung |
|---|---|
| Produkt | Notiz mit Ihren Antworten |
| Zeit | 5 Min. |
| Sozialform | Einzel- oder Partnerarbeit |
Aufgabe 2: Praktische Übung mit Pseudo-Klassen
Ausgangslage
Erstelle eine Datei index.html mit folgendem Inhalt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo-Klassen Übung</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Pseudo-Klassen in Aktion</h1> <button>Klick mich</button> <input type="text" placeholder="Fokus mich"> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ul> </body> </html>
Aufgabenstellung
- Erstellen Sie eine CSS-Datei
styles.cssund verknüpfe sie die CSS-Datei mit der HTML-Datei. - Fügen Sie eine Regel hinzu, die das
<button>-Element verändert, wenn die Maus darüberfährt (hover). - Erstellen Sie eine Regel für
button:active, sodass sich das Aussehen ändert, wenn der Button geklickt wird. - Gestalten Sie das
<input>-Feld so, dass sich die Rahmenfarbe ändert, wenn es fokussiert wird (focus). - Setzen Sie eine Regel, die den ersten
<li>fett macht und den letzten<li>grau färbt. - Verwenden Sie
nth-child(n), um das zweite<li>-Element in einer anderen Farbe darzustellen. - Fügen Sie eine Deklaration hinzu, sodass das
<h1>-Element eine andere Farbe bekommt, wenn man mit der Maus darüberfährt. - Testet eure Lösung, indem ihr die HTML-Datei in einem Browser öffnet und mit den Elementen interagiert!
Rahmenbedingungen
| Was | Beschreibung |
|---|---|
| Produkt | HTML- und CSS-Datei |
| Zeit | 15 Min. |
| Sozialform | Einzel- oder Partnerarbeit |