{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "css-basic-selectors", "title": "CSS: Grundlegende Selektoren", "description": "CSS-Selektoren sind die Grundlage für das Stylen von Webseiten und ermöglichen es dir, bestimmte HTML-Elemente für die Gestaltung auszuwählen. Dieses Modul stellt grundlegende Selektortypen vor, einschließlich Element-Typ-Selektoren, Klassen-Selektoren, ID-Selektoren und des universellen Selektors.", "difficulty": "beginner", "lessons": [ { "id": "introduction-to-selectors", "title": "Was ist ein CSS-Selektor?", "description": "Ein CSS-Selektor ist der erste Teil einer CSS-Regel, der dem Browser mitteilt, welche HTML-Elemente die im Deklarationsblock definierten Stile erhalten sollen. Selektoren sind im Wesentlichen Muster, die mit Elementen in deinem HTML-Dokument übereinstimmen. Das Verstehen von Selektoren ist grundlegend, da sie bestimmen, welche Elemente von deinen CSS-Regeln betroffen sind. Das Element oder die Elemente, die von einem Selektor anvisiert werden, werden als 'Subjekt des Selektors' bezeichnet. Beim Schreiben einer CSS-Regel gibst du zuerst den Selektor an, gefolgt von geschweiften Klammern, die die Stil-Deklarationen enthalten.
Um beispielsweise die Textfarbe von Elementen zu ändern, kannst du die color-Eigenschaft in deinem Deklarationsblock verwenden.

/* Element-Selektor */\np {\n  color: orangered;\n  /* │       └─── Gibt den Wert des Ausdrucks an\n     │                                                     \n     └─────────── Gibt die Eigenschaft des Ausdrucks an */\n}
", "task": "Schreibe eine CSS-Regel mit einem Typ-Selektor, die alle Absatz-Elemente p im Dokument anvisiert. Mache den Text blau, indem du die color-Eigenschaft auf blue setzt.", "previewHTML": "

Einführung in CSS-Selektoren

\n

Dieser Absatz sollte blau werden.

\n
Dieses div-Element sollte unverändert bleiben.
\n

Dieser zweite Absatz sollte ebenfalls blau werden.

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h1, p, div { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", "codePrefix": "/* Schreibe einen Typ-Selektor, um alle Absatz-Elemente anzuvisieren */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": "p { color: blue }", "validations": [ { "type": "regex", "value": "^p\\s*{", "message": "Beginne deine Regel mit p { … }, um alle Absatz-Elemente auszuwählen", "options": { "caseSensitive": false } }, { "type": "contains", "value": "color:", "message": "Füge die color:-Eigenschaft in deine CSS-Regel ein" }, { "type": "contains", "value": "blue", "message": "Setze den Farbwert auf blue" }, { "type": "property_value", "value": { "property": "color", "expected": "blue" }, "message": "Verwende color: blue, um die Textfarbe zu setzen" }, { "type": "regex", "value": "p\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": false } } ] }, { "id": "type-selectors", "title": "Typ-Selektoren: HTML-Elemente anvisieren", "description": "Typ-Selektoren (auch Tag-Name-Selektoren oder Element-Selektoren genannt) visieren HTML-Elemente basierend auf ihrem Tag-Namen an. Zum Beispiel wählt p alle Absatz-Elemente, h1 alle Überschriften der ersten Ebene und div alle Division-Elemente aus. Typ-Selektoren sind die grundlegendste Art, Elemente auszuwählen, und wenden Stile einheitlich auf alle Instanzen eines bestimmten HTML-Elements in deinem Dokument an. Du kannst verschiedene CSS-Eigenschaften mit Typ-Selektoren definieren, wie color für Textfarbe, background-color für den Hintergrund und font-weight für Textbetonung. Sie bieten einen breiten Ansatz für das Styling deiner Seite und sind oft der Ausgangspunkt für spezifischeres Styling mit anderen Selektortypen.", "task": "Schreibe drei separate CSS-Regeln mit Typ-Selektoren, um bestimmte HTML-Elemente anzuvisieren: mache h2-Überschriften purple, gib span-Elementen einen yellow-Hintergrund und mache strong-Elemente red.", "previewHTML": "

Typ-Selektoren Beispiel

\n

Normaler Absatztext mit einem hervorgehobenen Span, der einen gelben Hintergrund haben sollte.

\n

Ein weiterer Absatz mit wichtigem, fetten Text, der rot sein sollte.

\n

Eine weitere Überschrift

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h2, p, span, strong { padding: 3px; }", "codePrefix": "/* Schreibe drei separate Typ-Selektoren unten */\n\n", "initialCode": "/* 1. Mache h2-Überschriften lila */\n\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\n\n\n/* 3. Mache strong-Elemente rot */\n", "codeSuffix": "", "previewContainer": "preview-area", "solution": "/* 1. Mache h2-Überschriften lila */\nh2 {\n color: purple;\n}\n\n/* 2. Gib span-Elementen einen gelben Hintergrund */\nspan {\n background-color: yellow;\n}\n\n/* 3. Mache strong-Elemente rot */\nstrong {\n color: red;\n}", "validations": [ { "type": "regex", "value": "^h2\\s*{", "message": "Füge einen h2 { … }-Selektor hinzu" }, { "type": "property_value", "value": { "property": "color", "expected": "purple" }, "message": "Setze die color-Eigenschaft auf purple für h2-Elemente" }, { "type": "regex", "value": "h2\\s*{[^}]*}", "message": "Vergiss nicht, deine h2-Regel mit einer schließenden Klammer } zu beenden" }, { "type": "regex", "value": "^span\\s*{", "message": "Füge einen span { … }-Selektor hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "yellow" }, "message": "Setze background-color: yellow für span-Elemente" }, { "type": "regex", "value": "span\\s*{[^}]*}", "message": "Vergiss nicht, deine span-Regel mit einer schließenden Klammer } zu beenden" }, { "type": "regex", "value": "^strong\\s*{", "message": "Füge einen strong { … }-Selektor hinzu" }, { "type": "regex", "value": "strong\\s*{\\s*color:\\s*red;[^}]*}", "message": "Setze color: red für strong-Elemente" } ] }, { "id": "class-selectors", "title": "Klassen-Selektoren: Elementgruppen stylen", "description": "Klassen-Selektoren visieren Elemente mit einem bestimmten Klassen-Attributwert an. Sie beginnen mit einem Punkt (.) gefolgt vom Klassennamen. Klassen sind mächtig, weil sie es ermöglichen, die gleichen Stile auf mehrere Elemente anzuwenden, unabhängig von ihrem Typ. Ein HTML-Element kann mehrere Klassen haben (durch Leerzeichen im class-Attribut getrennt), und eine Klasse kann auf beliebig viele Elemente angewendet werden. Bei der Verwendung von Klassen-Selektoren kannst du Eigenschaften wie background-color zum Setzen der Hintergrundfarbe und font-weight zur Kontrolle der Textdicke anwenden. Diese Flexibilität macht Klassen-Selektoren zu einer der am häufigsten verwendeten Methoden zur Anwendung von Stilen in CSS und ermöglicht modulares und wiederverwendbares Styling auf deiner gesamten Website.", "task": "Erstelle eine CSS-Regel mit einem Klassen-Selektor, die Elemente mit der Klasse highlight anvisiert. Gib diesen Elementen einen yellow-Hintergrund und bold-Text.", "previewHTML": "

Verwendung von Klassen-Selektoren

\n

Dies ist ein normaler Absatz, aber dieser Span hat die highlight-Klasse angewendet.

\n

Dieser gesamte Absatz hat die highlight-Klasse.

\n", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h2, p, li { padding: 5px; margin-bottom: 10px; }", "codePrefix": "/* Erstelle einen Klassen-Selektor für Elemente mit der 'highlight'-Klasse */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^\\.highlight\\s*{", "message": "Beginne deine Regel mit .highlight { … }, um einen Klassen-Selektor zu erstellen", "options": { "caseSensitive": true } }, { "type": "contains", "value": "background-color:", "message": "Füge die background-color:-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "yellow" }, "message": "Setze die Hintergrundfarbe auf yellow" }, { "type": "contains", "value": "font-weight:", "message": "Füge die font-weight:-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "font-weight", "expected": "bold" }, "message": "Setze font-weight auf bold" }, { "type": "regex", "value": "\\.highlight\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "multiple-classes", "title": "Mit mehreren Klassen arbeiten", "description": "HTML-Elemente können mehrere Klassen gleichzeitig haben, was komponierbare und modulare CSS-Designs ermöglicht. Wenn ein Element mehrere Klassen hat, erhält es Stile von allen passenden Klassen-Selektoren. Dieser Ansatz ermöglicht es dir, eine Bibliothek wiederverwendbarer CSS-Klassen aufzubauen, die auf verschiedene Arten kombiniert werden können. Du kannst auch Elemente anvisieren, die eine bestimmte Kombination von Klassen haben, indem du Klassen-Selektoren ohne Leerzeichen verkettst (z.B. .class1.class2). Beim Stylen dieser Elemente könntest du Eigenschaften wie border-color verwenden, um die Farbe von Element-Rahmen zu ändern, und background-color, um die Hintergrundfarbe von Elementen zu setzen. Diese Technik ermöglicht bedingte Stile, die nur gelten, wenn bestimmte Klassen zusammen erscheinen.", "task": "Vervollständige die CSS-Regel, die Elemente mit sowohl card als auch featured-Klassen anvisiert, indem du die Selektoren verkettest. Setze border-color auf gold und background-color auf lemonchiffon, um hervorgehobene Karten hervorzuheben.", "previewHTML": "

Mehrfach-Klassen-Kombinationen

\n
Normale Karte
\n
Hervorgehobene Karte
\n
Nur hervorgehoben (keine Karte)
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }", "sandboxCSS": "", "codePrefix": "/* Die .card-Klasse hat bereits grundlegendes Styling */\n/* Visiere jetzt Elemente mit BEIDEN Klassen an: 'card' UND 'featured' */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": ".card.featured { border-color: gold; background-color: lemonchiffon }", "validations": [ { "type": "regex", "value": "^\\.card\\.featured\\s*{", "message": "Verkette die Selektoren als .card.featured (kein Leerzeichen dazwischen)", "options": { "caseSensitive": true } }, { "type": "contains", "value": "border-color:", "message": "Füge die border-color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "border-color", "expected": "gold" }, "message": "Setze die Rahmenfarbe auf gold" }, { "type": "regex", "value": "\\.card\\.featured\\s*{[^}]*;", "message": "Vergiss nicht, deine CSS-Regel mit einem Semikolon ; zu beenden" }, { "type": "contains", "value": "background-color:", "message": "Füge die background-color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "lemonchiffon" }, "message": "Setze die Hintergrundfarbe auf lemonchiffon" }, { "type": "regex", "value": "\\.card\\.featured\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "class-with-type", "title": "Typ- und Klassen-Selektoren kombinieren", "description": "Du kannst Typ-Selektoren mit Klassen-Selektoren kombinieren, um bestimmte HTML-Elemente anzuvisieren, die eine bestimmte Klasse haben. Dies erstellt einen spezifischeren Selektor, der nur passt, wenn beide Bedingungen wahr sind: das Element ist vom angegebenen Typ UND es hat die angegebene Klasse. Zum Beispiel würde p.note Absatz-Elemente mit der Klasse note auswählen, aber keine divs oder spans mit derselben Klasse. Du kannst diese kombinierten Selektionen mit Eigenschaften wie background-color stylen, um einen farbigen Hintergrund für deine Elemente zu setzen. Dieser Ansatz ermöglicht es dir, verschiedene Stile auf dieselbe Klasse anzuwenden, wenn sie auf verschiedenen Elementtypen erscheint.", "task": "Erstelle eine CSS-Regel, die speziell <span>-Elemente mit der Klasse highlight anvisiert. Gib diesen Elementen einen orangen Hintergrund, während andere Elemente mit der highlight-Klasse unverändert bleiben.", "previewHTML": "

Typ- und Klassen-Kombinationen

\n

Dieser Absatz hat einen hervorgehobenen Span, der einen orangen Hintergrund haben sollte.

\n

Dieser Absatz hat die highlight-Klasse, sollte aber KEINEN orangen Hintergrund haben.

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }", "sandboxCSS": "h2, p, span { padding: 5px; }", "codePrefix": "/* Die .highlight-Klasse setzt bereits font-weight auf bold */\n/* Visiere jetzt NUR span-Elemente mit der highlight-Klasse an */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^span\\.highlight\\s*{", "message": "Verwende den span.highlight-Selektor (kein Leerzeichen zwischen Element und Klasse)", "options": { "caseSensitive": true } }, { "type": "contains", "value": "background-color:", "message": "Füge die background-color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "orange" }, "message": "Setze die Hintergrundfarbe auf orange" }, { "type": "regex", "value": "span\\.highlight\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "id-selectors", "title": "ID-Selektoren: Einzigartige Elemente anvisieren", "description": "ID-Selektoren visieren Elemente mit einem bestimmten id-Attribut an. Sie beginnen mit einem Raute-/Hash-Zeichen (#) gefolgt vom ID-Namen. Im Gegensatz zu Klassen müssen IDs innerhalb eines Dokuments einzigartig sein – jeder ID-Wert sollte nur einmal pro Seite verwendet werden. ID-Selektoren haben eine höhere Spezifität als Klassen- oder Element-Selektoren, was bedeutet, dass sie diese Selektoren bei Konflikten überschreiben. Beim Stylen mit ID-Selektoren kannst du Eigenschaften wie color verwenden, um die Textfarbe zu definieren, und text-decoration, um das Erscheinungsbild von Text zu kontrollieren, wie das Hinzufügen von Unterstreichungen zu Elementen. Wegen ihrer Einzigartigkeitsanforderung werden IDs am besten für einmalige Elemente wie Seitenköpfe, Hauptnavigation oder spezifische einzigartige Komponenten verwendet, die nur einmal auf einer Seite erscheinen.", "task": "Erstelle eine CSS-Regel mit einem ID-Selektor, die das Element mit der ID main-title anvisiert. Setze seine Farbe auf purple und füge eine Unterstreichung mit text-decoration: underline hinzu.", "previewHTML": "

Haupt-Seitentitel

\n

Normaler Absatzinhalt.

\n

Sekundäre Überschrift

\n

Einführungsabsatz (andere ID).

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h1, h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", "codePrefix": "/* Erstelle einen ID-Selektor für das Element mit id=\"main-title\" */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^#main-title\\s*{", "message": "Beginne deine Regel mit #main-title, um einen ID-Selektor zu erstellen", "options": { "caseSensitive": true } }, { "type": "contains", "value": "color:", "message": "Füge die color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "color", "expected": "purple" }, "message": "Setze die Farbe auf purple" }, { "type": "contains", "value": "text-decoration:", "message": "Füge die text-decoration-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "text-decoration", "expected": "underline" }, "message": "Setze text-decoration auf underline" }, { "type": "regex", "value": "#main-title\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "id-with-type", "title": "Typ- und ID-Selektoren kombinieren", "description": "Ähnlich wie du Typ- und Klassen-Selektoren kombinieren kannst, kannst du auch Typ-Selektoren mit ID-Selektoren kombinieren. Zum Beispiel visiert h1#title ein h1-Element mit der ID 'title' an. Bei diesem kombinierten Ansatz kannst du CSS-Eigenschaften wie font-style anwenden, um die Neigung des Textes zu kontrollieren und ihn kursiv oder normal zu machen. Obwohl diese Selektor-Kombination spezifischer ist als die Verwendung nur des ID-Selektors, ist sie oft unnötig, da IDs bereits einzigartig im Dokument sein sollten. Diese Technik kann jedoch nützlich sein, um die Lesbarkeit des Codes zu verbessern oder wenn du betonen möchtest, dass eine bestimmte ID nur auf einem bestimmten Elementtyp erscheinen sollte.", "task": "Erstelle eine CSS-Regel, die einen Typ-Selektor mit einem ID-Selektor kombiniert, um speziell ein Absatz-Element mit der ID special anzuvisieren. Setze seinen Schriftstil auf kursiv.", "previewHTML": "

Überschrift mit ID \"special\" (sollte NICHT betroffen sein)

\n

Absatz mit ID \"special\" (sollte kursiv werden)

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "h2, p { padding: 8px; margin-bottom: 10px; border: 1px dashed #ccc; }", "codePrefix": "/* Erstelle einen kombinierten Typ+ID-Selektor für einen Absatz mit id=\"special\" */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^p#special\\s*{", "message": "Verwende p#special, um Absätze mit ID special anzuvisieren", "options": { "caseSensitive": true } }, { "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": "p#special\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "selector-lists", "title": "Selektor-Listen: Gleiche Regeln auf mehrere Selektoren anwenden", "description": "Wenn mehrere Elemente das gleiche Styling benötigen, kannst du sie mit einer Selektor-Liste (auch Gruppierungs-Selektoren genannt) zusammenfassen. Selektor-Listen werden erstellt, indem einzelne Selektoren durch Kommas getrennt werden. Dieser Ansatz reduziert Wiederholungen in deinem CSS und macht es wartbarer und effizienter. Zum Beispiel wendet h1, h2, h3 { color: blue; } die gleiche blaue Farbe auf alle drei Überschriftenebenen an. Beim Stylen mehrerer Selektoren gleichzeitig kannst du Eigenschaften wie background-color für den Hintergrund, border-left für einen linken Rahmen mit bestimmter Dicke, Stil und Farbe, und padding-left anwenden, um Abstand zwischen dem Inhalt und dem linken Rahmen zu schaffen. Leerzeichen um Kommas sind optional, und jeder Selektor in der Liste kann ein beliebiger gültiger Selektortyp sein – Elemente, Klassen, IDs oder sogar komplexere Selektoren.", "task": "Erstelle eine Selektor-Liste, die die gleichen Stile auf drei verschiedene Elemente anwendet: Absätze mit der Klasse note, Listenelemente mit der Klasse important und das Element mit der ID summary. Gib ihnen einen lightyellow-Hintergrund, einen gold-linken Rahmen und etwas linkes padding.", "previewHTML": "

Dies ist ein Notiz-Absatz.

\n\n
Zusammenfassungs-Abschnitt
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "p, li, div { padding: 8px; margin-bottom: 8px; border: 1px dashed gray; }", "codePrefix": "/* Erstelle eine Selektor-Liste, um die gleichen Stile auf mehrere verschiedene Elemente anzuwenden */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": "p.note,\nli.important,\n#summary {\n background-color: lightyellow;\n border-left: 3px solid gold;\n padding-left: 10px\n}", "validations": [ { "type": "contains", "value": "p.note", "message": "Füge p.note in deine Selektor-Liste ein", "options": { "caseSensitive": true } }, { "type": "contains", "value": "li.important", "message": "Füge li.important in deine Selektor-Liste ein", "options": { "caseSensitive": true } }, { "type": "contains", "value": "#summary", "message": "Füge #summary in deine Selektor-Liste ein", "options": { "caseSensitive": true } }, { "type": "regex", "value": "(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)\\s*,\\s*(p\\.note|li\\.important|#summary)", "message": "Erstelle eine kommagetrennte Liste mit allen drei Selektoren", "options": { "caseSensitive": true } }, { "type": "contains", "value": "background-color:", "message": "Füge die background-color-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "background-color", "expected": "lightyellow" }, "message": "Setze die Hintergrundfarbe auf lightyellow" }, { "type": "contains", "value": "border-left:", "message": "Füge die border-left-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "border-left", "expected": "3px solid gold" }, "message": "Verwende border-left: 3px solid gold, um einen linken Rahmen zu erstellen" }, { "type": "contains", "value": "padding-left:", "message": "Füge die padding-left-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "padding-left", "expected": "10px" }, "message": "Verwende padding-left: 10px, um linkes Padding hinzuzufügen" } ] }, { "id": "universal-selector", "title": "Der universelle Selektor: Alles anvisieren", "description": "Der universelle Selektor wird durch ein Sternchen (*) gekennzeichnet und passt auf jedes Element jedes Typs. Er wählt alles im Dokument aus oder, wenn er mit anderen Selektoren kombiniert wird, alles innerhalb eines bestimmten Kontexts. Zum Beispiel entfernt * { margin: 0; } Ränder von allen Elementen, während article * alle Elemente innerhalb von article-Elementen auswählt. Bei der Verwendung des universellen Selektors in Kombination mit anderen Selektoren kannst du Eigenschaften wie margin anwenden, um die Abstände um Elemente zu kontrollieren. Der universelle Selektor ist mächtig, sollte aber wegen seiner breiten Auswirkung vorsichtig verwendet werden. Er wird häufig in CSS-Resets verwendet, um Standard-Browser-Styling zu überschreiben, oder um alle Kinder eines bestimmten Elements anzuvisieren.", "task": "Verwende den universellen Selektor, um Ränder von allen Elementen innerhalb des Container-divs zu entfernen. Erstelle eine Regel mit div.container * als Selektor und setze margin: 0.", "previewHTML": "
\n

Innerhalb des Containers

\n

Dieser Absatz ist innerhalb des Containers.

\n \n
\n

Dieser Absatz ist außerhalb des Containers und sollte nicht betroffen sein.

", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }", "sandboxCSS": "", "codePrefix": "/* Verwende den universellen Selektor, um alle Elemente innerhalb des Containers anzuvisieren */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^div\\.container\\s+\\*\\s*{", "message": "Verwende div.container *-Selektor (mit einem Leerzeichen zwischen container und *)", "options": { "caseSensitive": true } }, { "type": "contains", "value": "margin:", "message": "Füge die margin-Eigenschaft hinzu" }, { "type": "property_value", "value": { "property": "margin", "expected": "0" }, "message": "Setze margin auf 0" }, { "type": "regex", "value": "div\\.container\\s+\\*\\s*{[^}]*}", "message": "Vergiss nicht, deine CSS-Regel mit einer schließenden Klammer } zu beenden", "options": { "caseSensitive": true } } ] }, { "id": "specificity-basics", "title": "Selektor-Spezifität verstehen", "description": "CSS-Spezifität bestimmt, welche Stile Vorrang haben, wenn mehrere widersprüchliche Regeln auf dasselbe Element abzielen. Spezifität folgt einem hierarchischen System: Inline-Stile haben die höchste Spezifität, gefolgt von ID-Selektoren, dann Klassen-/Attribut-/Pseudo-Klassen-Selektoren und schließlich Element-/Pseudo-Element-Selektoren. Dies kann als vierteilige Punktzahl (inline, ID, Klasse, Element) konzeptualisiert werden. Beim Erstellen mehrerer Regeln, die auf dieselben Elemente abzielen könnten, kannst du die color-Eigenschaft verwenden, um Textfarben zu setzen, und die Spezifität bestimmt, welche Farbe tatsächlich angewendet wird. Das Verstehen von Spezifität ist entscheidend für vorhersagbares Styling und das Debuggen von CSS-Konflikten. Wenn zwei Selektoren gleiche Spezifität haben, gewinnt derjenige, der zuletzt im Stylesheet kommt.", "task": "Untersuche die vorhandenen CSS-Regeln und füge eine neue Regel mit höherer Spezifität hinzu, um die Textfarbe des Absatzes zu überschreiben. Erstelle eine Regel mit '.content p' als Selektor und setze color: green.", "previewHTML": "
\n

Welche Farbe wird dieser Absatz haben? Schau dir die CSS-Regeln und ihre Spezifität an.

\n
", "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }", "sandboxCSS": "p { border: 1px dashed gray; padding: 10px; }", "codePrefix": "/* Diese CSS-Regeln visieren denselben Absatz an, haben aber unterschiedliche Spezifität */\n\n/* Regel 1: Element-Selektor (niedrigste Spezifität) */\np {\n color: red;\n}\n\n/* Regel 2: Nachfahren-Selektor (höhere Spezifität als nur 'p') */\n", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^\\.content\\s+p\\s*{", "message": "Verwende .content p als deinen Selektor (beachte das Leerzeichen dazwischen)", "options": { "caseSensitive": true } }, { "type": "contains", "value": "color:", "message": "Füge die color-Eigenschaft hinzu" }, { "type": "contains", "value": "green", "message": "" } ] } ] }