Dieser Link außerhalb von nav sollte nicht betroffen sein.
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } nav { border: 2px solid navy; padding: 15px; background-color: aliceblue; margin-bottom: 15px; } ul { list-style-type: none; padding-left: 20px; } li { margin-bottom: 5px; }", "sandboxCSS": "", "codePrefix": "/* Visiere alle Anker-Elemente innerhalb von nav mit dem Nachfahren-Kombinator an */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": "nav a {\n text-decoration: none;\n color: blue;\n}", "validations": [ { "type": "regex", "value": "^nav\\s+a\\s*{", "message": "Verwende nav a mit einem Leerzeichen zwischen nav und a", "options": { "caseSensitive": true } }, { "type": "contains", "value": "text-decoration:", "message": "Füge die text-decoration-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "text-decoration", "expected": "none" }, "message": "Setze text-decoration auf none" }, { "type": "contains", "value": "color:", "message": "Füge die color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "color", "expected": "blue" }, "message": "Setze color auf blue" }, { "type": "regex", "value": "nav\\s+a\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "adjacent-sibling-combinator", "title": "Benachbarter-Geschwister-Kombinator: Das nächste Element", "description": "Der benachbarte-Geschwister-Kombinator (+) wählt ein Element aus, das einem anderen Element auf derselben Ebene in der HTML-Struktur unmittelbar folgt. Beide Elemente müssen denselben Elternteil haben, und es dürfen keine anderen Elemente zwischen ihnen sein. Zum Beispiel wählt h1 + p Absatz-Elemente aus, die direkt nach h1-Überschriften kommen. Dieser Kombinator ist besonders nützlich für das Styling von Elementen, die besondere Beziehungen haben, wie der erste Absatz nach einer Überschrift oder Labels, die Formulareingaben folgen. Beim Stylen benachbarter Geschwister kannst du Eigenschaften wie margin-top verwenden, um Abstände anzupassen, und font-style, um Betonung wie Kursivschrift hinzuzufügen, um visuelle Hierarchie zu schaffen.", "task": "Verwende den benachbarten-Geschwister-Kombinator, um Absätze anzuvisieren, die unmittelbar auf h2-Überschriften folgen. Entferne ihren oberen Rand mit margin-top: 0 und mache sie kursiv.", "previewHTML": "Dieser Absatz folgt direkt auf h2 (sollte betroffen sein).
\nDieser Absatz kommt nach einem anderen Absatz (sollte NICHT betroffen sein).
\nDieser Absatz folgt auch direkt auf h2 (sollte betroffen sein).
\nDieser Absatz kommt nach einem div (sollte NICHT betroffen sein).
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } h2, p, div { margin: 15px 0; padding: 8px; border: 1px dashed #ccc; }", "sandboxCSS": "", "codePrefix": "/* Visiere Absätze an, die unmittelbar auf h2-Überschriften folgen */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": "h2 + p {\n margin-top: 0;\n font-style: italic;\n}", "validations": [ { "type": "regex", "value": "^h2\\s*\\+\\s*p\\s*{", "message": "Verwende h2 + p mit dem benachbarten-Geschwister-Kombinator (+)", "options": { "caseSensitive": true } }, { "type": "contains", "value": "margin-top:", "message": "Füge die margin-top-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "margin-top", "expected": "0" }, "message": "Setze margin-top auf 0" }, { "type": "contains", "value": "font-style:", "message": "Füge die font-style-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "font-style", "expected": "italic" }, "message": "Setze font-style auf italic" }, { "type": "regex", "value": "h2\\s*\\+\\s*p\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "general-sibling-combinator", "title": "Allgemeiner-Geschwister-Kombinator: Alle folgenden Geschwister", "description": "Der allgemeine-Geschwister-Kombinator (~) wählt alle Elemente aus, die einem anderen Element auf derselben Ebene folgen, nicht nur das unmittelbar benachbarte. Im Gegensatz zum benachbarten-Geschwister-Kombinator können andere Elemente zwischen den Zielelementen sein, solange sie alle denselben Elternteil haben und die ausgewählten Elemente nach dem Referenzelement kommen. Zum Beispiel wählt h2 ~ p alle Absatz-Elemente aus, die nach einer h2-Überschrift auf derselben Ebene erscheinen. Beim Stylen allgemeiner Geschwister kannst du Eigenschaften wie color verwenden, um die Textfarbe zu ändern, und padding-left, um visuelle Einrückung zu schaffen, was hilft, die Beziehung zwischen verwandten Inhaltsabschnitten zu zeigen.", "task": "Verwende den allgemeinen-Geschwister-Kombinator, um alle Absätze anzuvisieren, die nach der h3-Überschrift kommen (auf derselben Ebene). Gib ihnen eine gray-Farbe und 20px linkes Padding.", "previewHTML": "Dieser Absatz kommt vor h3 (sollte NICHT betroffen sein).
\nErster Absatz nach h3 (sollte betroffen sein).
\nZweiter Absatz nach h3 (sollte auch betroffen sein).
\n Mehr Inhalt\nDritter Absatz nach h3 (sollte auch betroffen sein).
\nFahre mit der Maus über den Button unten, um den Effekt zu sehen:
\n\nDer Button sollte seine Farben ändern, wenn du mit der Maus darüber fährst.
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } button { padding: 12px 24px; font-size: 16px; border: 2px solid darkblue; background-color: lightblue; color: darkblue; border-radius: 5px; cursor: pointer; }", "sandboxCSS": "", "codePrefix": "/* Erstelle einen Hover-Effekt für den Button */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": "button:hover {\n background-color: darkblue;\n color: white;\n}", "validations": [ { "type": "regex", "value": "^button:hover\\s*{", "message": "Verwende button:hover, um Buttons beim Hover anzuvisieren", "options": { "caseSensitive": true } }, { "type": "contains", "value": "background-color:", "message": "Füge die background-color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "darkblue" }, "message": "Setze background-color auf darkblue" }, { "type": "contains", "value": "color:", "message": "Füge die color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "color", "expected": "white" }, "message": "Setze color auf white" }, { "type": "regex", "value": "button:hover\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "first-child-pseudo-class", "title": "Die :first-child Pseudo-Klasse", "description": "Die :first-child Pseudo-Klasse wählt Elemente aus, die das erste Kind ihres Elternelements sind. Dies ist nützlich für das Anwenden spezieller Stile auf das erste Element in Listen, den ersten Absatz in Artikeln oder das erste Element in einem beliebigen Container. Zum Beispiel wählt li:first-child das erste Listenelement in jeder Liste aus, während p:first-child Absätze auswählt, die das erste Kind-Element ihres Containers sind. Beim Stylen erster Kinder kannst du Eigenschaften wie font-weight verwenden, um das erste Element fett zu machen, und margin-top, um Abstände anzupassen, was hilft, visuelle Hierarchie zu schaffen und das Layout deines Inhalts zu verbessern.", "task": "Verwende die :first-child Pseudo-Klasse, um das erste Listenelement in jeder Liste anzuvisieren. Mache es bold und entferne seinen oberen Rand.", "previewHTML": "