Klassen-Selektor
Klassen-Selektor
Klassen-Selektor ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. 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 HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Warum Klassen-Selektoren verwenden
Hallo,
Wir sind bei den Klassen-Selektoren angekommen, einem der wichtigsten Themen in CSS.
Wir kennen den Klassen-Selektor bereits, weil wir ihn bisher häufig verwendet haben.
In dieser Lektion festigen wir unser Wissen und lernen zugleich seine Vorteile gegenüber anderen Selektoren kennen.
Syntax des Klassenselektors
Beginnen wir also.
Wir verwenden den Punkt-Selektor (.), um einen Klassenselektor zu definieren. Unten sehen Sie einen Klassenselektor namens my-class, dem der Stil font-size: 10px; zugewiesen wurde.
.my-class {
font-size: 10px;
}
Wir können für einen Klassenselektor auch mehrere Stile definieren.
.my-class {
font-size: 10px;
}
Mehrere Selektoren
Wir können demselben Element mehr als eine Klasse zuweisen.
Im folgenden Beispiel werden zwei Klassenselektoren namens el1 und el2 definiert.
Dem mit dem p-Tag erstellten Element können zwei oder mehr Klassen zum class-Attribut hinzugefügt werden, wobei zwischen ihnen ein Leerzeichen steht.
Im Vorschaubereich sehen Sie, dass die Stile beider Klassen gleichzeitig auf das Element angewendet werden.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Warum sollten wir also den Klassenselektor dem Tag- und ID-Selektor vorziehen?
Warum sollten wir also den Klassenselektor dem Tag- und ID-Selektor vorziehen?
Wenn wir den Tag-Selektor verwenden, kann dies zu unerwünschten Ergebnissen führen, da er alle mit diesem Tag erstellten Elemente betrifft. Daher verwenden wir diese Tags normalerweise, wenn alle Elemente eine gemeinsame Eigenschaft haben sollen.
Wenn beispielsweise die Schriftfamilie jedes Elements „Lato“ sein soll, erstellen wir folgende Definition.
a{
font-family: Lato,sans-serif
}Warum sollten wir also den Klassenselektor dem Tag- und ID-Selektor vorziehen? 2
Mit dem ID-Selektor könnten wir eine elementspezifische Definition erstellen.
Da jedoch alle unsere Stildefinitionen nur für ein Element gelten, mussten wir den Code für jedes weitere Element, das dieselben Eigenschaften anzeigen sollte, neu schreiben.
Denn in einem HTML-Dokument darf es nur ein Element mit derselben ID geben.
CSS-Spezifität
Lernen wir nun das Konzept der CSS-Spezifität kennen.
Erstellen wir erneut ein Problem, um das Thema besser zu verstehen. Wir lernen dieses Konzept, während wir das Problem lösen.
CSS-Spezifität 2
Im folgenden Beispiel
wurde eine Stildefinition für das p-Tag erstellt.
Außerdem wurde mit einem Klassenselektor namens .first eine Stildefinition erstellt.
Beide Selektoren wählten dasselbe Element in unserem HTML-Dokument aus.
Beide Selektoren definieren Stile, die dieselbe Farbeigenschaft ersetzen. In diesem Fall kommt es zu einem Konflikt.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS-Spezifität 3
Wenn wir uns das Beispiel ansehen, könnten wir aufgrund unseres bisherigen Wissens annehmen, dass die Farbe rot sein wird.
Denn das Konzept der Kaskade besagt, dass die zuletzt stehende Regel in der Code-Reihenfolge gewinnt.
Es gibt jedoch eine kleine Besonderheit. Haben beide Regeln dieselbe Spezifität, gewinnt die zuletzt hinzugekommene Regel.
Die Spezifität zeigt, wie wichtig ein Selektor für das betreffende Element bzw. die betreffenden Elemente ist.
Unabhängig von seiner Position im Code wird der Selektor mit der höheren Spezifität vom Browser ausgewertet.
Warnung
Der Klassenselektor ist eine spezifischere Definition als der Elementselektor. Daher ist sein Spezifitätsrang höher.
Spezifität von Selektoren
Herauszufinden, welcher Selektor spezifischer ist, ist eigentlich ganz einfach.
Da einem Element nur eine ID zugewiesen werden kann und jede ID auf einer Webseite nur einmal vorkommt, erwarten wir, dass sie die höchste Priorität hat.
Klassenselektoren können dagegen spezifischer als Tag-Selektoren ausgewertet werden, weil sie eine spezifischere Gruppe als das Tag auswählen.
Im folgenden Beispiel werden wir sehen, dass der ID-Selektor gewinnt, indem wir dasselbe Element mit drei verschiedenen Selektoren auswählen.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Tool zur Berechnung der Spezifität
Über diesen Link können Sie den Online-Rechner für die Spezifität aufrufen.
Wann die Spezifität eine Rolle spielt
Muss ich diese Berechnungen also ständig durchführen?
Natürlich nicht. Wenn wir unseren Code gemäß den Standards schreiben, treten keine Konflikte auf.
Sie müssen also nicht ständig mathematische Berechnungen durchführen. Wenn jedoch ein Problem auftritt, können Sie diese Informationen benötigen, um es zu lösen.
Glückwunsch
Glückwunsch. 🥳🥳🥳
Sie haben die Lektion Klassenselektor und CSS-Spezifität abgeschlossen.
Im nächsten Abschnitt lernen wir die Selektortypen kennen.
Sie können auf „Weiter“ klicken, um mit dem nächsten Abschnitt fortzufahren.
Häufig gestellte Fragen
Ist die Lektion „Klassen-Selektor“ kostenlos?
Ja — der vollständige Text von „Klassen-Selektor“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „Klassen-Selektor“?
Klassen-Selektor Du übst HTML for Kids 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 HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids 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 1 von 1.
Wie lange dauert die Lektion „Klassen-Selektor“?
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 HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-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.