Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu02:loesungen:pseudo-klassen [2026/03/18 08:04] – angelegt vdemir
+++ de:modul:m287:learningunits:lu02:loesungen:pseudo-klassen [2026/03/18 08:18] (aktuell) – [Index.htm] vdemir
@@ Zeile 5: / Zeile 5: @@
 Beantworten Sie 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.
+**1. 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?
+  * Eine Pseudo-Klasse beschreibt einen bestimmten Zustand eines Elements (z. B. Hover oder Fokus), ohne dass HTML angepasst wird.
-  - Mit welcher Pseudo-Klasse kann ein Element gezielt werden, das den Fokus hat (z. B. ein Input-Feld)?
+  * Eine normale Klasse wird dagegen explizit im HTML vergeben (class="...") und ist dauerhaft.
-  - 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)'' und ''nth-of-type(n)''.
-==== Rahmenbedingungen =====
+**2. Welche Pseudo-Klasse wird verwendet, um das Styling eines Links zu ändern, wenn die Maus darüberfährt?**
-^ Was ^ Beschreibung ^
+  * Die Pseudo-Klasse lautet :hover und wird aktiviert, wenn sich die Maus über dem Element befindet.
-| Produkt | Notiz mit Ihren Antworten |
-| Zeit | 5 Min. |
-| Sozialform | Einzel- oder Partnerarbeit |
-----
+** 3. Mit welcher Pseudo-Klasse kann ein Element gezielt werden, das den Fokus hat (z. B. ein Input-Feld)?**
+  * Dafür wird :focus verwendet; sie greift, wenn ein Element aktiv ausgewählt ist (z. B. durch Klick oder Tab).
-===== Aufgabe 2: Praktische Übung mit Pseudo-Klassen =====
+** 4. Welche Pseudo-Klassen ermöglichen es, das erste und das letzte Kind eines übergeordneten Elements zu stylen?**
+  * //:first-child// wählt das erste Kind eines Elements
+  * //:last-child// das letzte
-==== Ausgangslage ====
+**5. Erkläre den Unterschied zwischen ''nth-child(n)'' und ''nth-of-type(n)''.**
+  * //nth-child(n)// zählt alle Kindelemente unabhängig vom Typ
+  * //nth-of-type(n)// berücksichtigt nur Elemente desselben Typs (z. B. nur <li>)
-Erstellen Sie eine Datei ''index.html'' mit folgendem Inhalt:
+----
+===== Index.html =====
 <code html>
@@ Zeile 59: / Zeile 61: @@
   - Testen Sie Ihre Lösung, indem Sie die HTML-Datei in einem Browser öffnen und mit den Elementen interagiert!
-==== Rahmenbedingungen =====
+==== Lösung ''styles.css'' ====
-^ Was ^ Beschreibung ^
-| Produkt | HTML- und CSS-Datei |
+<code CSS>
-| Zeit | 15 Min. |
+/* Grundlayout */
-| Sozialform | Einzel- oder Partnerarbeit |
+body {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+}
+button {
+    padding: 10px 16px;
+    border: none;
+    background-color: steelblue;
+    color: white;
+    cursor: pointer;
+}
+/* Teil 2: Fügen Sie eine Regel hinzu, die das <button>-Element verändert, wenn die Maus darüberfährt (hover). */
+button:hover {
+    background-color: darkorange;
+}
+/* Teil 3: Erstellen Sie eine Regel für button:active, sodass sich das Aussehen ändert, wenn der Button geklickt wird. */
+button:active {
+    background-color: crimson;
+    transform: scale(0.97);
+}
+/* Teil 4: Gestalten Sie das <input>-Feld so, dass sich die Rahmenfarbe ändert, wenn es fokussiert wird (focus). */
+input {
+    padding: 8px;
+    border: 2px solid pink;
+    outline: none;
+}
+input:focus {
+    border-color: seagreen;
+}
+/* Teil 5: Setzen Sie eine Regel, die den ersten <li> fett macht und den letzten <li> grau färbt. */
+li:first-child {
+    font-weight: bold;
+}
+li:last-child {
+    color: gray;
+}
+/* Teil 6: Verwenden Sie nth-child(n), um das zweite <li>-Element in einer anderen Farbe darzustellen. */
+li:nth-child(2) {
+    color: blue;
+}
+/* Teil 7: Fügen Sie eine Deklaration hinzu, sodass das <h1>-Element eine andere Farbe bekommt, wenn man mit der Maus darüberfährt. */
+h1:hover {
+    color: purple;
+}
+</code>
+----
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir