Tilbage til Fundamentals

3. semester / Tema 13C: Frontend Design

Nesting i CSS

Saml relaterede selectors og states tættere i komponentens CSS.

Se undervisningsslides

Relevante links

TL;DR

  1. Nesting gør CSS lettere at læse, fordi beslægtede regler står samlet.
  2. & refererer til den aktuelle parent-selector.
  3. Du kan nest’e både selectors, pseudo-klasser og @media/@container.
  4. Brug nesting til struktur, men hold selectors bevidste for at undgå utilsigtet scope.

Hvad løser nesting?

Nesting handler primært om organisering: regler, states og kontekst kan ligge tæt på hinanden i stedet for at være spredt over hele filen.

Det gør komponent-CSS mere “co-located”, så du hurtigere kan forstå og ændre adfærden.

Ampersand og selector-logik

& peger på den aktuelle selector. Det gør det enkelt at beskrive variationer:

a {
  background: red;


  &:is(:hover, :focus-visible) {
    background: blue;
  }
}

Du får tydelig sammenhæng mellem base-regel og interaktions-state.

Inverteret kontekst

Nesting kan også udtrykke “når jeg ligger inde i X”:

h1 {
  color: blue;


  article & {
    color: red;
  }
}

Det er nyttigt, når samme element skal opføre sig forskelligt alt efter kontekst.

Co-location

Co-location handler ikke kun om selectors men også om at holde relevante @media- og @container-regler tæt på det, de påvirker. Nesting gør det nemt at gruppere alle variationer af et element, inklusive responsive tilpasninger, på ét sted.

.container {
  display: grid;
  gap: 1rem;


  @media (width > 600px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Alt der vedrører .container ligger samlet, også responsive variationer.

Øvelser

Prøv selv at omskrive en eksisterende CSS til nesting. Det er en god måde at forstå, hvordan det kan forbedre struktur og læsbarhed.

Brug nesting til at ændre udseendet af article afhængigt af dets placering i strukturen.

  1. Brug :nth-child(even) til at målrette lige section-elementer.
  2. Beskriv relationen til article med > i en nestet selector, så kun direkte børn rammes, og brug & til at overskrive farverne.