CSS-Nesting
Variablen haben deine Werte benannt. calc und Co. haben sie berechnet. Nesting ordnet die Selektoren, die diese Werte nutzen: Titel, Button und Hover-Styles einer Card gehören in .card, statt den Elternnamen durch die ganze Datei zu wiederholen.
Kindselektor verschachteln
Schreibe eine Regel in eine andere. Ein verschachtelter Klassen- oder Typselektor wird als Nachkomme des Parents verbunden (Leerzeichen-Kombinator), sofern du nichts anderes mit & sagst:
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);
.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.body {
color: var(--muted, #444);
line-height: 1.5;
}
}
Der Browser expandiert das zu .card .title und .card .body. Du bekommst weiterhin gewöhnliche Nachkommenselektoren — Nesting ist Zucker für Struktur und Nähe, kein neues Matching-Modell.
Der Parent-Selektor &
Nutze &, wenn die verschachtelte Regel am selben Element wie der Parent hängen muss — Pseudo-Klassen, Pseudo-Elemente oder eine Extra-Klasse am Parent:
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;
&:hover {
background: var(--brand-hover, #1d4ed8);
}
&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}
&.is-primary {
background: var(--brand-strong, #1e40af);
}
}
&:hover bedeutet .button:hover. &.is-primary bedeutet .button.is-primary. Ohne & ist ein nacktes :hover { } in nativem CSS ungültiges Nesting — & macht die Anbindung explizit.
Kombinatoren mit &
Setze den Kombinator hinter &, wenn du ein Kind, ein Geschwister oder eine andere explizite Verbindung willst — nicht nur die Nachkommen-Leerstelle:
.nav {
display: flex;
gap: 0.75rem;
& > .item {
padding: 0.35rem 0.6rem;
}
& > .item + .item {
border-inline-start: 1px solid #ddd;
}
/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}
& > .item → .nav > .item. Ein verschachteltes .badge ohne & → .nav .badge. Wähle bewusst: tiefe Zufalls-Nachkommen sind ein typischer Nesting-Geruch.
@media am Bauteil verschachteln
Du kannst At-Rules wie @media in eine Style-Regel legen, damit Breakpoints neben dem Bauteil leben, das sie ändern:
.hero {
padding: 2rem 1.25rem;
h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (min-width: 48rem) {
padding: 3rem 2rem;
h1 {
max-width: 20ch;
}
}
}
Expandiert umschließt die Media Query weiterhin die Deklarationen zu .hero (und .hero h1). Kombiniere das mit Tokens und clamp() aus früheren Modern-Toolkit-Lektionen — Nesting verschiebt nur die Regeln.
Nesting-Muster auf einen Blick
📊 Spickzettel natives Nesting
| Du schreibst | Es bedeutet | Wann nutzen |
|---|---|---|
.card { .title { } } |
.card .title |
Nachkommen unter dem Bauteil stylen |
.btn { &:hover { } } |
.btn:hover |
Pseudo-Klasse am selben Element |
.btn { &.big { } } |
.btn.big |
Extra-Klasse am selben Element |
.nav { & > a { } } |
.nav > a |
Expliziter Kind-Kombinator |
.box { @media (…) { } } |
Media Query auf die Selektoren dieser Regel bezogen | Breakpoints beim Bauteil halten |
Nester flach halten
Zwei oder drei Ebenen bleiben meist lesbar. Tiefere Bäume holen das „Selektor-Pyramiden“-Problem aus Sass-Teams zurück: schwere Diffs, höhere Spezifität, Styles, die nur in einem Riesen-Parent Sinn ergeben. Lieber eine klare Bauteil-Wurzel (.card, .nav) und Zustände sowie nahe Kinder nesten — nicht die ganze Seite.
Bauteil-Paket: Tokens + Nest + Zustände
Ein realistischer Ausschnitt verknüpft die letzten drei Toolkit-Ideen, ohne Calc- oder Variablen-Lektionen zu wiederholen:
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}
.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}
&.is-compact {
--panel-pad: 0.5rem;
}
@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}
Tokens bleiben Custom Properties; calc leitet weiter den Abstand ab; Nesting hält heading, actions, kompakt und den Kleinbildschirm-Tweak an einem Ort.
Selbst ausprobieren
- Flache Regeln
.card {},.card .title {},.card .meta {}unter einem.cardmit Nesting umschreiben. &:hoveran.linksetzen, damit nur der Link (nicht ein verschachteltes span) die Farbe wechselt.@media (min-width: 40rem)in.sidebarnesten, um Padding zu verbreitern — in den DevTools die expandierten Selektoren prüfen.- Ein fälschlich verschachteltes
:hover { }(ohne&) in&:hover { }umwandeln und sehen, dass es valide wird. - Ein unordentliches Drei-Ebenen-Nest auf zwei Ebenen begrenzen, indem du einen inneren Block zur eigenen Klasse beförderst.
Typische Fehler
:hover { }verschachtelt ohne&— ungültig oder nicht gemeint; nimm&:hover- Erwarten, dass nacktes
.child.parent.childbedeutet — dafür brauchst du&.child - Sass-
&__element-BEM-Hacks blind kopieren — natives Nesting folgt der CSS-Selektorgrammatik - Fünf Ebenen nesten „weil es geht“ — Lesbarkeit und Spezifität leiden
- Denken, Nesting ersetzt
var()odercalc()— es gruppiert nur Selektoren und At-Rules
Kurzfassung
- Kindselektoren nesten, damit Bauteil-Styles lokal bleiben; standardmäßig werden sie zu Nachkommen
&für Zustände am selben Element (:hover,.is-active) und explizite Kombinatoren@medianeben dem Bauteil nesten, das du justierst- Nester flach halten; Nesting ist Struktur, kein Token- oder Mathe-Feature
- Als Nächstes im Modern Toolkit: Container Queries — Styles von der Parent-Größe, nicht nur vom Viewport
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt