Selektoren: Das richtige Gestaltungselement auswählen
Wählen Sie Elemente anhand ihrer Attribute aus und setzen Sie den Universalselektor effektiv ein.
Selektoren: Das richtige Gestaltungselement auswählen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 3 Lektionen.
Wählen Sie Ihr Ziel
Bevor Sie etwas gestalten, bestimmen Sie, was gestaltet werden soll. Das ist die Aufgabe eines Selektors. In dieser Lektion wird es Ihnen klar – versprochen. ✨
Wie mit dem Finger zeigen
Ein Selektor bedeutet einfach, dass Sie auf etwas zeigen: „Dieses Ding hier.“ So einfach ist das. Auswendiglernen ist nicht nötig.
Nach Tag gestalten
Der einfachste Selektor verwendet einen Tagnamen. Schreiben Sie „p“, und Sie wählen alle Absätze auf der Seite gleichzeitig aus.
<p>All paragraphs turn red.</p>
Nach Klasse gestalten
Sie möchten nur einige Elemente gestalten? Geben Sie ihnen eine Klasse und wählen Sie diese mit einem Punkt aus, zum Beispiel .note. Sehr flexibel!
<p class="note">This note is orange.</p>
Klassen sind wiederverwendbar
Das Beste daran: Eine Klasse kann für viele Elemente wiederverwendet werden. Einmal gestalten, überall anwenden. Eine enorme Zeitersparnis. ⏱️
Nach ID gestalten
Brauchen Sie ein einzelnes besonderes Element? Geben Sie ihm eine ID und wählen Sie es mit einem Rautezeichen aus, zum Beispiel #header. Eine ID ist für ein eindeutiges Element gedacht.
<h1 id="header">Page Header</h1>
Punkt oder Raute
Ein kurzer Merktrick: Ein Punkt steht für viele Elemente (Klasse), eine Raute für eines (ID). Tagnamen verwenden überhaupt kein Symbol.
Wie Namensschilder
Stellen Sie sich Klassen als Namensschilder für Gruppen und IDs als einzelnes VIP-Abzeichen vor. Selektoren lesen einfach diese Schilder. 🏷️
Kombinieren Sie nach Belieben
Echte Seiten kombinieren Tags, Klassen und IDs, um genau das Gewünschte zu gestalten. Sie kennen jetzt alle drei! 🙌
Sie haben es geschafft!
Sie können jetzt erklären, was CSS ist, eine Regel lesen und mit Selektoren Ziele auswählen. Das ist eine echte Grundlage für CSS. Ich bin stolz auf Sie! 🎉
Kurzer Check
Letzte Prüfung! Welches Symbol verwenden Sie, um in CSS eine Klasse auszuwählen?
Häufig gestellte Fragen
Ist die Lektion „Selektoren: Das richtige Gestaltungselement auswählen“ kostenlos?
Ja — der vollständige Text von „Selektoren: Das richtige Gestaltungselement auswählen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Selektoren: Das richtige Gestaltungselement auswählen“?
Wählen Sie Elemente anhand ihrer Attribute aus und setzen Sie den Universalselektor effektiv ein. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Selektoren: Das richtige Gestaltungselement auswählen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was ist CSS?
- Wie CSS Seiten zum Leben erweckt
- Selektoren: Das richtige Gestaltungselement auswählen