Vererbung
Die liebe Verwandtschaft
Im CSS ist Vererbung wie ein chaotisches Familientreffen, bei dem jeder irgendwie miteinander verbunden ist. Die Eltern geben ihre Stile an die Kinder weiter, die Kinder geben sie an ihre Nachfahren weiter, und plötzlich tragen alle im Raum die gleiche Farbe und Schriftart, ob sie wollen oder nicht. Es ist, als hätten die Ältesten des Clans beschlossen, dass alle dieselbe Robe tragen.
Aber es gibt mehr als nur Eltern und Kinder. Da sind auch die Geschwister, die sich gegenseitig beeinflussen können, indem sie neben oder nach ihren Verwandten auftauchen. Wenn du besonders kreativ sein willst, kannst du bestimmten Verwandten individuelle Stile verpassen, während der Rest in der Tradition bleibt. Das alles sorgt dafür, dass deine Webseite wie eine große, glückliche Familie wirkt.
Beziehungen in der Familie
damit du jeden richtig ansprichst
inherit
Die Weitergabe der Familienbande
Mit dem inherit-Zauber übernimmt ein Element stolz die Eigenschaften seiner Eltern, als ob es sagen möchte: „Wenn mein Vater so aussieht, sehe ich genauso aus!“
p {
font-size: inherit;
}Dieser Zauberspruch sorgt dafür, dass alle Paragraphen die Schriftgröße ihrer Ahnen übernehmen – wie eine gut gehütete Familientradition.
Allgemeine Nachfahren
Der weitreichende Ahnenzauber
Der allgemeine Nachfahren-Selektor ist wie der weise Älteste auf dem Familientreffen, der sicherstellt, dass alle Nachkommen den gleichen Stil annehmen. Ob weit oben im Stammbaum oder tief in den Verzweigungen versteckt, kein Nachfahre entgeht seinem Einfluss.
.parent p {
color: red;
}Ein simples Leerzeichen im CSS, und schon leuchtet die gesamte Nachkommenschaft der Paragraphen in herrlichem Rot.
Kind-Selektor >
Der liebevolle Elternblick
Der Kind-Selektor ist wie die strenge Tante, die sich nur um die direkten, eigenen Kinder kümmert. Kein Blick wird auf entfernte Verwandte geworfen, nur die ersten Nachkommen eines Elements werden von diesem gezielten Zauber erfasst.
.parent>p {
color: dodgerblue;
}Dieser Zauberspruch färbt alle direkten Kinder eines Elternelements, die Paragraphen sind rot ein
Geschwister +
Das ewige Geschwisterduell
Geschwister können sich gegenseitig beeinflussen – so wie in jeder Familie. Der Geschwister-Selektor lässt dich die direkt nebeneinanderliegenden Elemente magisch verknüpfen.
h2+p {
background-color: black;
}Hier färbst du den nächsten Paragraphen nach einer h2 in Schwarz, weil Geschwister sich eben manchmal farblich abheben müssen.
Allgemeine Geschwister ~
Die entfernten Cousins und Cousinen
Manchmal hast du es nicht nur mit direkten Geschwistern zu tun, sondern auch mit all den Cousins und Cousinen, die beim Familientreffen auftauchen. Der allgemeine Geschwister-Selektor wirkt auf alle Geschwister, egal wie viele andere Elemente dazwischenstehen.
h3~p {
color: red;
}Ein Zauber, und alle Paragraphen nach einer h3 leuchten in Rot – ganz egal, wie weit sie auseinanderliegen.
Kindeskinder
Die magischen Enkel, die es nicht gibt
Im CSS gibt es Zauber für Eltern, Kinder und Geschwister, aber was ist mit den armen Enkelkindern? Nun, es gibt keinen speziellen Zauber nur für sie. Der Kind-Selektor kümmert sich um die direkten Kinder, der Nachfahren-Selektor um alle. Aber für die Enkel? Da muss man sich mit den bestehenden Zaubern behelfen. Vielleicht erfinden die CSS-Magier eines Tages einen „Großeltern-Zauber“, aber bis dahin bleibt es ein unerfüllter Wunsch!
In dieser Lektion hast du gelernt…
- Wie
inheritdafür sorgt, dass Kindelemente die Eigenschaften ihrer Eltern übernehmen, um einheitliche Stile zu wahren. - Warum der allgemeine Nachfahren-Selektor (
- Wie der Kind-Selektor (
>) nur direkte Kindelemente anspricht, ohne entfernte Nachkommen zu beeinflussen. - Wann du den Geschwister-Selektor (
+) einsetzt, um direkt auf das nächste Element der gleichen Ebene zuzugreifen. - Wie der allgemeine Geschwister-Selektor (
~) funktioniert, um alle folgenden Geschwister eines Elements zu stylen, egal wie weit sie entfernt sind.
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!
Geheimnisse in der Familie
In den sonnigen Wäldern von Sunnyside Fields lebt eine magische Familie, deren Mitglieder eng miteinander verbunden sind. Um ihre Magie zu verstehen, musst du die Beziehungen und Vererbungen zwischen ihnen durch CSS entdecken. Nutze die verschiedenen Selek-toren, um die Verbindung zwischen Eltern, Kindern und Geschwistern zu erkennen.
Deine Aufgabe: Die Magie der Verwandtschaft
- Allgemeine Nachfahren (.parent p): Schreibe eine Regel, die alle <p>-Tags innerhalb der .parent-Klasse betrifft.
Setze die Schriftfarbe auf red. Welche Elemente werden beeinflusst und warum ist dieser Selektor so flexibel? - Kindselektor (>): Verwende den Kindselektor, um das direkte Kind-Element (.child > p) zu stylen. Setze die Schriftfarbe auf lightblue. Was passiert, wenn du diesen Selektor anwendest, und wie unterscheidet er sich von allgemeinen Nachfahren?
- Geschwisterselektor (+): Style das Geschwister-Element (.parent p + p) und setze die Schriftfarbe auf orange. Warum wird nur das nächste Geschwister-Element verändert und nicht alle?
- Allgemeine Geschwisterselektoren (~): Verwende den allgemeinen Geschwisterselektor (.parent h1 ~ p), um alle <p>-Tags nach dem <h1>-Tag zu stylen und deren Textfarbe auf green zu setzen. Welche Elemente werden betroffen und warum ist dieser Selektor hilfreich?
- Reflexion: Beschreibe die verschiedenen Selektoren, die du angewendet hast, und welche Elemente sie beeinflusst haben.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.parent p {
color: red;
}
.child>p {
color: lightblue;
}
.parent p+p {
color: orange;
}
.parent h1~p {
color: green;
}