CSS-Nesting
Der Zauber des verschachtelten Stils
Im Reich des CSS gibt es einen neuen, mächtigen Zauber: Nesting! Einst nur den Adepten von Preprozessoren wie SCSS vorbehalten, hat sich dieses magische Konstrukt nun direkt in die heiligen Hallen des nativen CSS geschlichen.
Nesting ist wie der Zauber, der es dir ermöglicht, Regeln für Eltern- und Kind-Elemente sauber in einem einzigen Block zu bündeln, ohne dass du dich ständig wiederholen musst. Es ist, als würdest du eine Armee von CSS-Soldaten in Reih und Glied aufstellen, jeder bereit, den nächsten Befehl zu befolgen. Kein Chaos mehr, keine endlosen, unübersichtlichen Selektoren – Nesting bringt Ordnung ins Layout. Doch wie bei jedem mächtigen Werkzeug gilt es, diesen Zauber weise einzusetzen, um die Übersicht nicht zu verlieren.
Verschachteln mit Stil
Weniger Wiederholungen, mehr Übersicht – lass dein CSS logisch wachsen!
Die Macht des &
Der magische Anker
Das &-Symbol ist dein Zauberstab im Nesting und steht für den Eltern-selektor. Es verbindet verschachtelte Regeln elegant mit dem ursprünglichen Selektor, ohne dass du ihn ständig wiederholen musst.
Du brauchst das & immer dann, wenn du Pseudo-Klassen, Pseudo-Elemente oder spezifische Ergänzungen direkt mit dem Elternselektor verknüpfen willst.
Bei normalen Kind-Elementen kannst du darauf verzichten, da CSS-Nesting diese Verbindung automatisch herstellt. Stell dir das & als den unsichtbaren Faden vor, der den magischen Regel-kreis zusammenhält.
.container {
background: lightgray;
padding: 20px;
/* Kein & benötigt
– normale Kind-Elemente */
ul {
list-style: none;
padding: 0;
}
/* & benötigt –
für Pseudo-Klassen
und Pseudo-Elemente */
& li:hover {
color: darkblue;
cursor: pointer;
}
}
Verschachtelte Media Queries
Der dimensionale Zauber
Mit Nesting kannst du nicht nur normale Regeln verschachteln, sondern auch Media Queries. Damit passt sich dein Design elegant an jede Bildschirmgröße an, und zwar direkt dort, wo du es brauchst, ohne dass du den Fluss deines Stylesheets unterbrechen musst.
Hier wird die Schriftgröße und Linkfarbe für .parent und seine Kinder festgelegt. Doch sobald der Bildschirm schmaler wird, tritt die Media Query in Kraft und passt Schriftgröße und Farbe entsprechend an, alles sauber im Nesting-Stil.
.parent {
font-size: 20px;
& a {
color: dodgerblue;
}
@media (max-width: 600px) {
font-size: 16px;
& a {
color: coral;
}
}
}In dieser Lektion hast du gelernt…
- Wie du durch CSS-Nesting dein Stylesheet übersichtlicher und logischer strukturierst, indem du verwandte Regeln elegant untereinander verschachtelst.
- Wozu das
&-Symbol dient, nämlich um Pseudo-Klassen, Pseudo-Elemente oder Ergänzungen direkt mit dem Elternselektor zu verknüpfen, ohne den Selektor ständig neu schreiben zu müssen. - Wie du normale Kind-Elemente ohne
&verschachteln kannst, da der Zusammenhang automatisch hergestellt wird. - Auf welche Weise du Media Queries direkt im verschachtelten Block platzierst, damit du responsive Anpassungen kontextnah und sauber einbauen kannst, ohne deinen CSS-Flow zu unterbrechen.
- Warum Nesting den Code lesbarer und wartungsfreundlicher macht, weil verwandte Regeln klar gruppiert und unnötige Wiederholungen vermieden werden.
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 Pfade der Schatten
Die schattige Festung von Umbra ist ein Labyrinth aus gewundenen Wegen, die ineinander verschlungen sind wie die Gedanken eines besonders verwirrten Zauberers. Um dich durch diese düsteren Korridore zu wagen, musst du die Kunst des CSS-Nestings beherrschen. Lerne, wie du Stile geschickt ineinander verschachtelst, ohne dich selbst in den Tiefen deiner CSS-Dateien zu verlieren. Organisiere deine Regeln so elegant, dass selbst Umbra beeindruckt wäre – und vielleicht ein bisschen neidisch.
Deine Aufgabe: Verschachtle dein CSS
- Grundstruktur des CSS-Nestings anwenden:
Erstelle eine parent-Klasse und verwende das CSS-Nesting, um Stile für Unterelemente wie h1 und .menu direkt innerhalb der übergeordneten Klasse zu definieren. - Verschachtelte Listen und Pseudoklassen verwenden:
Verwende CSS-Nesting, um die li-Elemente der .menu-Liste zu stylen.
Teste, wie sich die :hover-Pseudoklasse verhält, wenn sie auf das li-Element angewendet wird. - Submenüs verschachteln:
Erstelle ein Submenü innerhalb der Hauptliste und verwende CSS-Nesting, um Stile speziell für .submenu- und li-Elemente darin anzuwenden. Teste, wie sich die Styles vererben und anwenden lassen. - Erweiterte Pseudoklassen und Strukturierung:
Nutze &:hover und andere Pseudoklassen, um Effekte für die Unterelemente im Submenü zu definieren.
Teste, wie sich die Schattenwege verändern, wenn du den Code änderst.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
/* Hauptmenü */
.menu {
list-style: none;
padding: 0;
li {
padding: 10px;
border: 1px solid #3e4451;
margin-bottom: 5px;
border-radius: 5px;
cursor: pointer;
background: #4a4f5c;
transition: all 0.3s ease;
&:hover {
background-color: #22a7f0;
color: white;
}
/* Untermenü */
.submenu {
list-style: none;
margin-top: 10px;
padding-left: 20px;
display: none;
li {
padding: 8px;
margin-bottom: 5px;
border: 1px solid #3b3f47;
border-radius: 5px;
background: #3e4451;
transition: all 0.3s ease;
&:hover {
background-color: #9b59b6;
}
}
}
&:hover .submenu {
display: block;
}
}
}