CSS-Selektoren
Lerne, Elemente mit einem Fingerschnipsen zu verzaubern
CSS-Selektoren sind magische Befehle, mit denen du bestimmte HTML-Elemente auswählst, um ihnen ein bisschen Stil zu verpassen. Jeder Selektor hat seine eigene Kraft – vom eleganten Einzeiler bis hin zur Massenverzauberung ganzer Elementgruppen. Willst du eine Überschrift hervorheben oder vielleicht gleich eine ganze Horde von Absätzen neu einkleiden? Kein Problem! Die richtigen Selektoren machen’s möglich.
Die Welt der CSS-Selektoren ist wie ein bunter Basar voller Tricks und Verwandlungen. Mit ein wenig Übung und der richtigen Auswahl kannst du deine Webseite so gestalten, dass sie aussieht, als hätten Elfen und Zauberer daran gearbeitet – und all das ohne einen einzigen Funken echten magischen Staubs.
Einfache Selektoren
Warum kompliziert, wenn’s auch simpel geht?
Der Universalselektor *
Der allmächtige Sternenzauber
Der Universalselektor (*) ist wie ein all-umfassender Sternenzauber, der alle Kreaturen und Objekte im Königreich HTML erreicht.
* {
margin: 0;
}Mit einem Wimpernschlag entfernt er jeglichen Abstand aller Elemente.
Der Elementselektor
Das gezielte Rufen
Der Elementselektor ist wie ein Ruf nach bestimmten Elementen. Er spricht genau diese Elemente an und verzaubert sie mit einer Ladung Stil.
p {
color: red;
}Wenn der Zauberer p ruft, werden alle Paragraphen rot dargestellt
Der ID-Selektor #
Der einzigartige Zauber
Der ID-Selektor ist ein spezialisierter Zauber, der nur ein einziges Element anspricht. Kein anderes darf denselben Namen tragen, sonst wird es verwirrend.
#header {
background: blue;
}Der Künstler ruft „header“, und schwupps – der Hintergrund des Elements wird strahlend blau.
Der Klassenselektor .
Der freundliche Versammlungszauber
Der Klassenselektor ist der Partyplaner unter den Selektoren. Er sorgt dafür, dass alle Elemente mit derselben Klasse ihre besten Kleider anziehen.
.cap {
background: red;
}Wenn der Künstler den Versammlungszauber wirkt, strahlen alle Elemente der Klasse „cap“ in einem kräftigen Rot, bereit für die Show.
Der Nachfahrenselektor
Der weise Ahnenruf
Der Nachfahrenselektor sorgt dafür, dass nicht nur die Eltern, sondern auch alle Nachfahren im Rampenlicht stehen. Ein Familienerbstück, wenn man so will.
div img {
width: 300px;
}Wenn der Künstler „div img“ murmelt, hören alle Bilder innerhalb eines divs den Ruf und nehmen ihre neue Breite von 300px an
Der Gruppenselektor
Gemeinsamkeiten geben den Ton an
Mit dem Gruppenselektor lässt der Künstler gleich eine ganze Horde von Elementen im selben Licht erstrahlen. Ein Komma dazwischen und schon erscheinen h2 und p in einem einheitlichen Grün, als hätten sie sich für das Gruppenfoto herausgeputzt.
h2, p {
color: green;
}Wenn der Zauberer den Gruppenselektor anspricht, werden in diesem Beispiel die Überschrift h2 und der Paragraph grün dargestellt
Weitere seltsame Selektoren
Nur für wahre Meister geeignet
Dann gibt es da noch die wirklich ausgefallenen Zauber. Attributselektoren, die geheime Schatztruhen öffnen, Pseudo-Klassen, die Elemente zum Tanzen bringen, wenn du mit der Maus über sie fährst, und Pseudo-Elemente, die sich wie unsichtbare Bühnenarbeiter um die kleinen Details kümmern. Aber Vorsicht! Diese Tricks beherrscht nur ein wahrer Meister – oder jemand, der sehr viel Kaffee getrunken hat.
In dieser Lektion hast du gelernt…
- Wie der Universalselektor
*alle Elemente auf deiner Seite beeinflusst, um globale Anpassungen vorzunehmen. - Warum Element-, ID- und Klassenselektoren wichtig sind, um einzelne oder mehrere Elemente gezielt zu stylen.
- Wie der Nachfahrenselektor Strukturen durchdringt, um Stile nur auf verschachtelte Elemente anzuwenden.
- Warum der Gruppenselektor nützlich ist, um mehrere Elemente gleichzeitig mit denselben Stilen zu versehen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Verborgenen Zeichen
In einer alten Ruine im Herzen von Sunnyside Fields hat der Gelehrte Lyrian eine verschlüsselte Inschrift entdeckt. Um die Geheimnisse dieser Inschrift zu entschlüsseln, musst du die magischen Selektoren verwenden, um die Zeichen sichtbar zu machen und ihre Bedeutung zu enthüllen. Verwende verschiedene CSS-Selektoren, um die Elemente im Codex zu beeinflussen.
Deine Aufgabe: Die Anwendung der Selektoren
Du hast ein einfaches HTML-Dokument mit dem folgenden Text vor dir:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Die Verborgenen Zeichen</title>
<link rel="stylesheet" href="css/06-style.css">
</head>
<body>
<h1 id="title">Willkommen im Codex</h1>
<div class="section">
<p>Dies ist ein alter Textabschnitt.</p>
</div>
<div class="highlight">
<p>Wichtige Information!</p>
</div>
</body>
</html>- Universal-Selektor (*): Verwende den Universal-Selektor, um allen Elementen eine Schriftfarbe zu geben. Teste aus, was passiert, wenn du die Farbe auf blueviolet setzt. Wie wirkt sich das auf das gesamte Dokument aus?
- Element-Selektor: Wende den Element-Selektor auf alle <p>-Tags an und gebe ihnen eine kursive Schrift (font-style:italic;). Was passiert, wenn du diesen Selektor anwendest? Welche Vorteile hat der Element-Selektor?
- ID-Selektor (#): Style die Überschrift (h1) mit der ID title. Setze den Hintergrund auf pink. Was ist der Vorteil eines ID-Selektors und wann könnte er nützlich sein?
- Klassen-Selektor (.): Verwende den Klassen-Selektor, um den Hintergrund der Klasse highlight orange zu färben. Wie wirkt sich das auf diesen speziellen Bereich aus?
- Nachfahren-Selektor: Verwende einen Nachfahren-Selektor, um den <p>-Tag innerhalb der Klasse highlight zu stylen. Setze die Schriftfarbe auf white. Warum ist dieser Selektor nützlich, um spezifischere Stile anzuwenden?
- Gruppenselektor: Verwende einen Gruppenselektor, um sowohl die <h1>-Überschrift als auch der Klasse highlight eine gleiche Schriftfamilie (‚Arial‘, sans-serif) zuzuweisen. Welche Vorteile hat es, mehrere Elemente mit einem Gruppenselektor gleichzeitig zu stylen?
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Die Verborgenen Zeichen</title>
<link rel="stylesheet" href="css/06-style.css">
</head>
<body>
<h1 id="title">Willkommen im Codex</h1>
<div class="section">
<p>Dies ist ein alter Textabschnitt.</p>
</div>
<div class="highlight">
<p>Wichtige Information!</p>
</div>
</body>
</html>* {
color: blueviolet;
}
p {
font-style: italic;
}
#title {
background: pink;
}
.highlight {
background: orange;
}
.highlight p {
color: white;
}
h1,
.highlight {
font-family: Arial, Helvetica, sans-serif;
}