Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu02:loesungen:pseudo-klassen [2026/03/18 08:08] – vdemir
+++ de:modul:m287:learningunits:lu02:loesungen:pseudo-klassen [2026/03/18 08:18] (aktuell) – [Index.htm] vdemir
@@ Zeile 16: / Zeile 16: @@
 ** 4. Welche Pseudo-Klassen ermöglichen es, das erste und das letzte Kind eines übergeordneten Elements zu stylen?**
-  * <code>:first-child</code> wählt das erste Kind eines Elements,
+  * //:first-child// wählt das erste Kind eines Elements
-  * :last-child das letzte.
+  * //:last-child// das letzte
-  - Erkläre den Unterschied zwischen ''nth-child(n)'' und ''nth-of-type(n)''.
+**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
-==== Rahmenbedingungen =====
+  * //nth-of-type(n)// berücksichtigt nur Elemente desselben Typs (z. B. nur <li>)
-^ Was ^ Beschreibung ^
-| Produkt | Notiz mit Ihren Antworten |
-| Zeit | 5 Min. |
-| Sozialform | Einzel- oder Partnerarbeit |
 ----
-===== Aufgabe 2: Praktische Übung mit Pseudo-Klassen =====
+===== Index.html =====
-==== Ausgangslage ====
-Erstellen Sie eine Datei ''index.html'' mit folgendem Inhalt:
 <code html>
@@ Zeile 69: / 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