liveBook · Manning

CSS nesting

As explained in CSS in Depth, Second Edition

CSS nesting is a language feature that allows a style rule to contain nested selectors and declarations representing related selector structures.

Repeated selectors make related styles harder to maintain. CSS nesting lets a style rule contain other rules whose selectors are relative to the outer selector. The browser joins them into selectors that can also be written without nesting; the benefit is less repetition and clearer grouping, not new styling capabilities. section 8.4 section 8.4.2

Listing 8.14 Nested CSS selectors
.card {             #1
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;

  > h3 {                    #2
    margin-block: 0;
    border-block-end: 1px solid #eee;
  }

  .card-body {              #3
    padding-block: 1em;
  }
}

The nested `> h3` targets a direct child of `.card`; the nested `.card-body` targets a descendant. Both remain visibly grouped with the card’s own declarations. section 8.4

Use `&` when the default descendant relationship is wrong. Inside `.modal`, `.is-open` means `.modal .is-open`, but `&.is-open` means `.modal.is-open`: two classes on the same element. Likewise, `&:hover` targets the parent element’s hover state. Placing `&` later, as in `.homepage &`, targets the parent in a particular context. Unlike Sass, native CSS nesting cannot use `&` to join partial class names. section 8.4.1

Listing 8.15 Using & to create a compound selector
.modal {
  display: none;

  &.is-open {       #1
    display: block;
  }
}

Compare the modal’s default `display: none` with the nested `&.is-open` rule that displays the same element when it has both classes. section 8.4.1

Check the assembled selector when specificity or matching matters. A nested `&` is interpreted using `:is()` around the parent selector. With a parent selector list, the highest-specificity entry can determine the nested rule’s specificity even when another entry matches. Reordering with `&` can also match markup that a quick reading misses: `footer &` inside `.card .title` can select a title in a footer that is itself inside a card. section 8.4.2

Nested `@media`, `@layer`, and `@supports` rules can keep related conditions beside the styles they modify. Declarations directly inside a nested at-rule apply to the outer selector without repeating it. Put ordinary declarations before nested blocks: the browser treats them as earlier for cascade source order even if written later, and older browsers can apply them before encountering unsupported nesting. Avoid nesting selectors so deeply that specificity becomes difficult to manage. section 8.4.3 section 8.4

How CSS in Depth, Second Edition covers it

How deep it goes
Works through selector joining, `&`, specificity, matching surprises, nested at-rules, and declaration order.
Examples
Uses card selectors, a modal state, a footer matching surprise, responsive headings, and nested input rules.
What it assumes
Assumes familiarity with CSS selectors and the cascade, but introduces nesting without requiring Sass or Less.
What you can do after
Apply it via native CSS to group related rules while checking selector meaning, specificity, source order, and browser support.
How it connects
Connects selector specificity and the cascade to `:is()`, media queries, cascade layers, and feature queries.
Cover of CSS in Depth, Second Edition
liveBookmanning.com
Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.