Selektortypen
Selektortypen
Selektortypen 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.
Einführung
Hallo,
In dieser Lektion vertiefen wir unsere CSS-Kenntnisse mit komplexeren Selektoren.
Mehrere Stildefinitionen
Wir können mehrere Stildefinitionen erstellen, indem wir zwischen den einzelnen Stilen Semikolons setzen.
.first{
color:blue;
font-size:20px;
text-align: center;
}Es gibt ein komplexer werdendes HTML-Dokument
Bisher haben wir mit einfachen Tag-, ID- und Klassenselektoren gearbeitet. Wenn die Benutzeroberfläche jedoch komplexer wird, müssen wir in manchen Fällen komplexere Selektoren verwenden.
Im folgenden Beispiel sehen Sie ein komplexer werdendes HTML-Dokument.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>Beispiel analysieren
Analysieren wir nun unseren Code.
- Im Body der Seite befindet sich ein div mit der ID my-area, das als Container dient. Es ist der Vorfahre aller Elemente innerhalb dieses divs.
- Das p-Element mit der Klasse first ist das Geschwisterelement des div-Elements mit der Klasse second.
- Das dritte Element ist das Kind des zweiten Elements, und das Element my-area kann als Vorfahre des dritten Elements betrachtet werden.
Warnung
Sie können sich das HTML-Layout wie einen echten Stammbaum vorstellen.
Sie können genetische Merkmale von Ihrem Großvater erben.
Wenn sich dieses Erbe jedoch bei Ihrem Vater verändert, ist das Gen des Vaters dominanter und das Merkmal Ihres Großvaters verändert sich.
Kombinationen von Selektoren
Sehen wir uns nun an, wie Selektoren kombiniert werden.
Die folgende Anweisung besagt, dass das Element mit der Klasse second ein Nachfahre (Kind oder Enkelkind) des Elements mit der Klasse third ist.
Wenn zwischen den beiden Klassen ein Leerzeichen steht, bedeutet dies, dass die Klasse auf der linken Seite nach einem Nachfahren sucht.
.second .third{
color:red;
}Kindselektor
Im folgenden Beispiel
wird die Klasse third ausgewählt, die ein Kind der Klasse second ist.
Das Größer-als-Zeichen bedeutet, dass das Kind des betreffenden Elements ausgewählt wird.
.second > .third{
color:red;
}Wir können Tag- und Klassenselektoren kombinieren, um ein Element auszuwählen.
Gleichzeitig können wir Tag- und Klassenselektoren kombinieren, um ein Element auszuwählen.
Das folgende Beispiel wählt p-Elemente mit der Klasse third aus.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Angenommen, wir möchten ein div mit der Klasse first auswählen.
Angenommen, wir möchten ein div mit der Klasse first auswählen.
Im folgenden Beispiel wird das Element mit der Klasse first ausgewählt, das ein Kind des div-Elements mit der ID my-area ist.
Dadurch erhöht sich die Spezifität des auszuwählenden Elements.
div#my-area > .first{
color:red;
}Alle auswählen
Das Sternchen (*) ist bei den Selektoren wichtig.
Es bedeutet, dass alle Elemente ausgewählt werden.
Im folgenden Beispiel bedeutet der Selektor, dass das Element mit der ID my-area alle Nachfahren auswählen soll.
Wichtig ist hierbei, dass nicht nur die Kinder, sondern alle Nachfahren ausgewählt werden.
Wenn wir nur die Kinder auswählen wollten, müssten wir das Größer-als-Zeichen vor das Sternchen setzen.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Selektor für direkt benachbarte Geschwisterelemente
Wir haben den Nachfahren- und den Kindselektor verwendet. Lernen wir nun den Geschwisterselektor kennen.
Der Geschwisterselektor verwendet das Pluszeichen (+), um das nächste Geschwisterelement auszuwählen.
In unserem Beispiel färbt der Selektor die Hintergrundfarbe des dritten Absatz-Elements gelb.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Selektor für nachfolgende Geschwisterelemente
Wenn wir nicht nur das direkt nächste Geschwisterelement, sondern alle folgenden Geschwisterelemente auswählen möchten, verwenden wir das Tildezeichen (~).
Das Tildezeichen ist auch als Subsequent-sibling Combinator bekannt.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudo-Klassen und CSS-Klassen
Ausdrücke, die keine Klasse sind, sich aber wie eine Klasse verhalten, werden Pseudo-Klassen genannt.
Wir definieren Pseudo-Klassen für kein Element in HTML.
Wenn der Browser den Code interpretiert, nimmt er an, dass sie existieren. Daher können wir Pseudo-Klassen in CSS-Selektoren verwenden.
Die Pseudo-Klasse :hover
Unter den Pseudo-Klassen ist :hover zweifellos die bekannteste.
Hover (:hover) ist eine Pseudo-Klasse, die der Browser automatisch für das betreffende Element definiert, wenn sich die Maus über dem Element befindet.
Pseudo-Klassen werden in der Selektor-Anweisung nach dem Doppelpunkt (:) verwendet.
Die Syntax zur Verwendung einer Pseudo-Klasse wird im Folgenden veranschaulicht.
selector:pseudo-class {
property: value;
}Links mit :hover gestalten
Erstellen wir nun einen Link und sehen wir uns an, wie er aussieht, wenn Sie mit der Maus darüberfahren.
Warnung: Da es auf Mobilgeräten kein Hover-Ereignis wie im Web gibt, wird dieser Effekt in den mobilen Coddykit-Anwendungen nicht angezeigt.
Im folgenden Beispiel sehen wir, dass sich die Farbe des Links grün färbt, wenn wir mit der Maus darüberfahren.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Die Pseudo-Klasse :first-child
Eine der verwirrendsten Pseudo-Klassen ist :first-child.
Wenn wir den Namen betrachten, könnten wir normalerweise daraus schließen, dass das erste Kind eines Elements ausgewählt wird.
Diese Schlussfolgerung ist jedoch nicht richtig.
Sie wird verwendet, um das erste Element unter den Geschwisterelementen eines Elements auszuwählen.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Die Pseudo-Klasse :last-child
last-child ist das Gegenstück zur Pseudo-Klasse first-child. Sie wird verwendet, um das letzte Element unter den Geschwisterelementen eines Elements auszuwählen.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Das Pseudo-Element ::before
Wenn wir etwas vor einem Element hinzufügen möchten, verwenden wir den Pseudo-Selektor ::before.
Im folgenden Beispiel haben wir vor den Header-Elementen den Inhalt „Hello“ eingefügt.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Das Pseudo-Element ::after
Das Pseudo-Element ::after, das das Gegenstück zum Pseudo-Element ::before ist, wird verwendet, um neue Inhalte nach dem Element einzufügen.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Pseudo-Klasse für Listen
Wir haben die am häufigsten verwendeten Pseudo-Klassen kennengelernt. Es gibt jedoch noch Dutzende weitere.
Über den unten stehenden Link können Sie eine Liste aller Pseudo-Klassen aufrufen. Sie können jede davon verwenden, sobald Sie sie benötigen.
Glückwunsch
Glückwunsch 🎉
In diesem Abschnitt haben wir die Selektortypen kennengelernt.
Im nächsten Abschnitt lernen wir die am häufigsten verwendeten CSS-Eigenschaften kennen.
Häufig gestellte Fragen
Ist die Lektion „Selektortypen“ kostenlos?
Ja — der vollständige Text von „Selektortypen“ 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 „Selektortypen“?
Selektortypen 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 „Selektortypen“?
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.