Nesting i CSS

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.

Et indlejret h2 vælger efterkommere, mens > h2 kun vælger direkte børn. &:hover rammer det aktuelle element i hover-tilstand; :hover uden & som nested selector beskriver en efterkommer i hover-tilstand. Oversæt selectoren til almindelig CSS, hvis du er i tvivl.

Rækkefølgen gælder stadig

Nesting ændrer ikke CSS til en række if/else-grene. Flere regler kan være aktive samtidig:

h1 {
  @media (width > 500px) {
    color: blue;
  }

  color: red;
}

I dette eksempel vinder den senere røde deklaration også over 500px. Flyt den før @media, og forudsig resultatet igen. Sammenlign med Computed i DevTools.

Inverteret kontekst

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

h1 {
  color: blue;

  article & {
    color: red;
  }
}

<h1>Blå overskrift</h1>
<article>
  <h1>Rød overskrift</h1>
</article>

En div med klassen parent ville ikke opfylde betingelsen article &. Det er den faktiske selector og HTML-struktur, der skal passe sammen.

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. Hold variationsreglerne inde i article, som slides beder om.
2. Brug section:nth-child(even) > & til at vælge det aktuelle article, når det er direkte barn af en section på en lige placering.
3. Skift farverne, og forklar betydningen af både > og &.

Den flade selector er section:nth-child(even) > article. Nesting skal gøre relationen nem at finde, ikke ændre hvilke elementer du ønsker at ramme.

Åbn omskrivningsøvelsen uden steps eller nth-øvelsen uden steps.

Bevar læsbarheden

Hold states og relevante media/container queries tæt på komponenten, men undgå at kopiere hele DOM-træet ind som nesting. Test, at en omskrivning rammer de samme elementer som før.

Vær også opmærksom på selector-lister: nesting får ligesom :is() specificity fra det stærkeste led i parent-listen. At samle en klasse og et id i samme liste kan derfor gøre en nested regel stærkere, end du forventer. Se MDN om nesting og specificity.