How does native CSS nesting work?

CSS nesting is now native, so you do not need a preprocessor for basic nesting. The & selector represents the parent selector, and nested rules can include pseudo-classes, media queries and other at-rules.

.card {
  padding: 1rem;

  & .title {
    margin: 0;
  }

  &:hover {
    border-color: #2563eb;
  }

  @media (min-width: 40rem) {
    padding: 2rem;
  }
}

What to remember

• & refers to the parent selector list
• Nested selectors inherit the specificity behaviour of their parent list, similar to :is()
• Nested at-rules such as @media apply to the rules inside them
• Declarations can appear before or after nested rules in current implementations
• Deep nesting makes selectors harder to override and debug

Nesting is convenient for component-scoped styles, but it is not a reason to recreate a deep Sass tree. Two or three levels is usually enough. If a selector is hard to read, a class on the target element is often clearer.