Native CSS Nesting

What You Learn From This Page

• How native CSS nesting groups selectors and conditional rules inside a parent style rule.
• How the & nesting selector changes descendants, modifiers, states, and parent contexts.
• How child and sibling combinators, pseudo-classes, pseudo-elements, attributes, and selector lists behave.
• How nesting interacts with specificity, cascade layers, media queries, container queries, and custom properties.
• How native nesting differs from Sass and why selector concatenation should not be assumed.
• How to prevent deep coupling, inaccessible states, compatibility problems, and difficult debugging.

Introduction

Native CSS nesting allows related selectors and conditional rules to be written inside a style rule. Instead of repeating .card for its title, hover state, focus treatment, and responsive changes, an author can group those concerns in one component block. Modern browsers parse that nesting directly; a preprocessor is not required for the feature itself.

Nesting improves locality, but it does not automatically improve architecture. Every nested selector still expands into a selector relationship, participates in specificity, and depends on some structure. A neat indentation pattern can hide a long, brittle selector just as easily as it can clarify a small component.

The useful principle is to nest states and tightly owned parts, not the entire document tree. Keep nesting shallow, understand when & represents the current parent selector, and flatten the rule mentally during review. If the expanded selector would be difficult to maintain, nesting does not make it better.

Why CSS Nesting Exists

Flat CSS often repeats a component selector across many locations. Base declarations may appear near the top of a file, responsive adjustments in a media-query section, and interaction states somewhere else. Finding the complete component contract requires searching the stylesheet.

Nesting keeps closely related declarations together and reduces repeated parent text. It is particularly effective for component states, small internal parts, and conditional changes. The goal is not fewer characters alone; it is a clearer unit of ownership.

Basic Nested Descendant Selector

A selector nested without & commonly represents a descendant relationship with the parent selector.

.card {
  padding: 1rem;

  h2 {
    margin-block: 0;
    font-size: 1.5rem;
  }
}

The nested h2 matches headings inside .card, conceptually like .card h2. Use an element selector only when every matching descendant is genuinely part of the component contract; otherwise a component-part class is safer.

Nested Component Classes

Meaningful part classes reduce dependence on exact markup.

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

  .card-title {
    margin: 0;
    font-size: 1.5rem;
  }

  .card-body {
    color: #475467;
  }
}

The expanded relationships resemble .card .card-title and .card .card-body. If the part classes are already globally unique, keeping them flat may produce lower specificity. Nest only when containment is an intentional requirement.

The & Nesting Selector

The & nesting selector represents the current parent selector in the nested context. It is essential when a pseudo-class, pseudo-element, attribute, or additional class belongs to the same element.

.button {
  background: #175cd3;

  &:hover {
    background: #1849a9;
  }
}

This produces the same-element relationship .button:hover. Without &, a separated selector would describe a descendant rather than the button's own state.

Hover, Focus, Active, and Disabled States

State-heavy controls are an excellent nesting use case because the parent selector would otherwise be repeated several times.

.button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;

  &:hover { background: #1849a9; }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  &:active { transform: scale(0.98); }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

Nesting keeps the interaction contract visible while preserving ordinary selector behavior.

Combining State Selectors

A nested selector list can apply one treatment to several states.

.link {
  color: #175cd3;

  &:hover,
  &:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
  }
}

Do not remove focus treatment merely to make it match hover. Keyboard focus needs a clearly visible indicator, and hover-only cues should not carry essential meaning.

Same-Element Modifiers

Placing another class directly after & targets the same element when it has both classes.

.card {
  border: 1px solid #d0d5dd;

  &.featured {
    border-color: #175cd3;
    background: #eff8ff;
  }
}

This corresponds to .card.featured. By contrast, a nested .featured without & represents a descendant such as .card .featured. The space changes the selected structure.

Attribute and Semantic States

Native nesting works well with ARIA and data attributes that expose real component state.

.toggle-button {
  &[aria-pressed="true"] {
    background: #175cd3;
    color: white;
  }
}

.alert {
  &[data-status="error"] {
    border-color: #b42318;
  }
}

JavaScript should update the semantic state, and CSS should reflect it. Avoid adding a visual class that can drift out of sync with aria-pressed, aria-expanded, or another meaningful attribute.

Pseudo-Elements

Pseudo-elements attach to the current parent selector with &.

.button {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }
}

The expanded relationship is .button::after. Generated content should remain decorative unless the accessibility behavior has been carefully verified; essential information belongs in the document.

Child Combinators

A nested relative selector can begin with the child combinator to limit matching to direct children.

.menu {
  > li {
    list-style: none;
  }

  > li > a {
    display: block;
    padding: 0.75rem 1rem;
  }
}

Direct-child rules can express a stable markup contract, but avoid requiring unnecessary wrappers or a precise depth when the component should tolerate structural variation.

Adjacent and General Siblings

Sibling combinators can be nested as relative selectors.

.heading {
  + p {
    margin-block-start: 0.5rem;
  }

  ~ .supporting-note {
    color: #667085;
  }
}

The first rule styles an immediately following paragraph; the second styles later matching siblings. These relationships should reflect meaningful document flow rather than accidental placement.

Parent Context Before &

The nesting selector can appear after an ancestor context.

.card {
  [data-theme="dark"] & {
    border-color: #475467;
  }
}

.directional-icon {
  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}

These resemble [data-theme="dark"] .card and [dir="rtl"] .directional-icon. Use contextual nesting sparingly because the component becomes dependent on a particular ancestor. Theme tokens and logical properties often reduce that coupling.

Nesting with :is()

The :is() pseudo-class can group same-element alternatives inside a nested state.

.card {
  &:is(.featured, .selected) {
    border-color: #175cd3;
  }
}

This matches a card that also has either class. Remember that :is() takes the specificity of its most specific argument, so grouping can affect override behavior.

Nesting with :where()

:where() always contributes zero specificity for its argument list, making it useful for low-authority descendant defaults.

.article {
  :where(h2, h3, p, ul, ol) {
    margin-block-start: 0;
  }
}

The parent portion still contributes specificity. Use :where() intentionally when consumers should be able to override the defaults easily.

Nesting with :has()

The relational :has() pseudo-class lets the current element respond to its contents or relationships.

.form-field {
  &:has(input:invalid) {
    border-color: #b42318;
  }
}

.card {
  &:has(.card-media) {
    grid-template-rows: auto 1fr;
  }
}

Use semantic states and appropriate validation timing. Styling a required empty input as invalid before the user interacts may create a poor experience even when the selector is technically correct.

Nested Selector Lists

Selector lists can appear at the parent and nested levels.

.card,
.panel {
  padding: 1rem;

  h2,
  h3 {
    margin-block: 0;
  }
}

The resulting matching relationships cover each parent alternative with each nested alternative. Large lists can expand into many combinations and make specificity harder to see. Split the rule when the grouped components no longer share a clear contract.

Specificity of Nested Selectors

Nesting does not reduce specificity. A nested descendant still includes the parent relationship, and a same-element modifier still includes both selectors. Parent selector lists are handled in a way comparable to grouping with :is(), so the most specific option in a list can influence the nested rule's specificity.

Before nesting, flatten the relationship mentally. If the effective selector would be too strong in flat CSS, it is also too strong when indented inside a component block.

Deep Nesting and Specificity Growth

A deeply nested rule can appear tidy while creating a long selector tied to the full page structure.

/* Avoid this structure */
.page {
  .layout {
    .sidebar {
      .menu {
        .item {
          a { color: blue; }
        }
      }
    }
  }
}

The link now depends on every ancestor. Moving the menu or adding an alternate layout can break the match, and overriding it requires unnecessary specificity.

Keep Nesting Shallow

One or two levels often provide the best balance. States, pseudo-elements, and tightly owned parts can sit directly inside the component. A third level may be reasonable for a state affecting one internal part, but repeated deeper levels should trigger a design review.

A numeric limit is a guideline rather than a parser rule. The better question is whether the expanded selector represents a stable component relationship and remains easy to override.

Do Not Mirror the DOM

HTML indentation is not a CSS architecture. Nesting body, main, section, article, div, and span copies accidental document depth into the selector. Minor markup refactoring then breaks styling.

Use classes that describe components and parts. Nest only the relationships the component intentionally owns.

Nesting Does Not Replace Naming

Native nesting reduces repetition but does not create component boundaries or prevent naming collisions. BEM, CSS Modules, web components, and project conventions can still provide identity and scope.

A class such as .card-title communicates ownership even when written flat. Do not replace a clear class contract with generic nested selectors merely because nesting is available.

Native CSS Nesting Versus Sass

Sass parses SCSS during a build and emits flat CSS. Native nesting is part of CSS and is parsed by the browser. The syntax overlaps for common state and descendant patterns, but the languages are not identical.

Do not assume every Sass feature, interpolation rule, or parent-selector trick is valid native CSS. A codebase migrating from Sass should test generated selector intent and browser support rather than removing the compiler mechanically.

No Selector String Concatenation

A common Sass BEM pattern appends text to the parent selector, such as &__title. Native & represents a selector; it is not a text variable for constructing a new class name.

/* Clear native CSS */
.card {
  .card__title {
    font-weight: 700;
  }

  &.card--featured {
    border-color: #175cd3;
  }
}

Write the element class explicitly and use & for the same element's modifier.

Optional and Explicit &

Modern native nesting accepts many descendant and relative-selector forms without a leading &. Explicit & remains necessary or clearer when attaching a pseudo-class, attribute, modifier, or pseudo-element to the parent, or when placing the parent within another context.

Teams supporting older native-nesting implementations or transformation tools should verify accepted syntax. A consistent style guide can prefer explicit forms in ambiguous cases while allowing concise descendant nesting.

Declarations and Nested Rules

A component block can contain declarations and nested rules. For clarity and compatibility with tooling, place custom properties and base declarations first, then child selectors, states, and conditional rules. This order makes the component's default appearance visible before variations.

.card {
  --card-gap: 1rem;
  display: grid;
  gap: var(--card-gap);

  .card-title { margin: 0; }
  &:hover { border-color: #175cd3; }
}

Recent CSS nesting behavior preserves declaration order through nested-declaration handling, but mixing later declarations between many nested rules can still confuse readers and older processors.

Nested Media Queries

Conditional group rules can be placed inside a style rule so component-responsive declarations remain close to the base.

.card {
  padding: 1rem;

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

The declarations inside the media rule apply to the parent selector when the condition matches. Use media queries for viewport or environmental conditions rather than every component-space decision.

Nested Container Queries

Container queries can live inside the responsive child's rule, keeping structural changes with the component.

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

  @container (min-width: 30rem) {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

An eligible ancestor still needs container-type. Nesting changes organization, not the container-selection model.

Nested @supports Rules

A feature query can enhance a component in place.

.glass-panel {
  background: rgb(255 255 255 / 0.92);

  @supports (backdrop-filter: blur(0.75rem)) {
    background: rgb(255 255 255 / 0.72);
    backdrop-filter: blur(0.75rem);
  }
}

The fallback remains outside the condition. The nested enhancement applies only when the feature is supported.

Nesting Inside Cascade Layers

Cascade layers and nesting solve separate concerns. A layer determines category priority, while nesting organizes related selectors.

@layer components {
  .button {
    background: #175cd3;

    &:hover {
      background: #1849a9;
    }
  }
}

The flattened state remains in the components layer. Layer order is considered before specificity when it competes with normal declarations in other layers.

Nesting with Custom Properties

States can override a component token instead of repeating every property that consumes it.

.button {
  --button-bg: #175cd3;
  --button-text: white;
  background: var(--button-bg);
  color: var(--button-text);

  &:hover { --button-bg: #1849a9; }

  &.secondary {
    --button-bg: #eaecf0;
    --button-text: #101828;
  }
}

This pattern keeps state differences small and makes theme integration easier.

Nesting with Logical Properties

Logical properties preserve flow-aware component behavior while nesting groups variants.

.callout {
  border-inline-start: 0.25rem solid #175cd3;
  padding-inline-start: 1rem;
  margin-block: 1.5rem;

  &.warning {
    border-inline-start-color: #b54708;
  }
}

The border adapts to LTR, RTL, and writing mode according to logical mapping. No direction-specific parent context is required.

Theme Contexts and Tokens

A parent context can theme one component, but semantic custom properties usually scale better across an application.

[data-theme="dark"] {
  --surface-card: #1d2939;
  --text-card: #f2f4f7;
}

.card {
  background: var(--surface-card, white);
  color: var(--text-card, #101828);
}

This avoids repeating [data-theme="dark"] & in every component and centralizes theme decisions.

Accessible Accordion Pattern

A disclosure button should expose expanded state through aria-expanded. Nested styles can rotate a decorative indicator and reveal the associated panel through an appropriate state strategy.

.accordion-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  .accordion-arrow {
    transition: transform 180ms ease;
  }

  &[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
  }

  &:focus-visible {
    outline: 2px solid #175cd3;
    outline-offset: 3px;
  }
}

CSS reflects semantic state; JavaScript and HTML still manage relationships, keyboard behavior, and panel visibility.

Reduced Motion Near the Component

A preference query can remain inside the component so its motion fallback is reviewed with the animation.

.card {
  transition: transform 180ms ease-out;

  &:hover,
  &:focus-within {
    transform: translateY(-0.2rem);
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &:hover,
    &:focus-within {
      transform: none;
    }
  }
}

Do not make hover the only way to discover information or trigger behavior.

Real-World Card Component

@layer components {
  .card {
    --card-border: #d0d5dd;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;

    .card-title {
      margin: 0;
      font-size: 1.5rem;
    }

    .card-body { color: #475467; }

    &:hover,
    &:focus-within {
      --card-border: #175cd3;
    }

    @container (min-width: 30rem) {
      grid-template-columns: 10rem minmax(0, 1fr);
    }
  }
}

The example groups owned parts and states without reproducing the page hierarchy.

Real-World Form Field

.form-field {
  display: grid;
  gap: 0.5rem;

  .field-label { font-weight: 600; }

  .field-input {
    padding: 0.75rem;
    border: 1px solid #98a2b3;

    &:focus-visible {
      outline: 2px solid #175cd3;
      outline-offset: 2px;
    }
  }

  .field-error { color: #b42318; }

  &:has(.field-input[aria-invalid="true"]) {
    .field-input { border-color: #b42318; }
  }
}

The visible error should also be programmatically associated with the field. Nesting organizes presentation but does not supply accessible relationships.

Organizing a Nested Component

A predictable internal order helps readers scan a block: custom properties, base declarations, tightly owned descendants, same-element states, and conditional rules. Teams may choose a different sequence, but consistency matters.

If one block grows to dozens of parts, states, media queries, and container queries, split the component by responsibility. Locality stops helping when the section can no longer be understood as one unit.

Large Selector Expansion

Combining parent and nested selector lists can create many effective selector combinations. This increases generated or parsed complexity and makes override behavior difficult to predict.

Use grouping only for components that truly share the same contract. Separate unrelated parents instead of saving a few lines through a broad nested list.

Common Mistake: Omitting & for a Modifier

/* Descendant, not same element */
.button {
  .primary { /* .button .primary */ }
}

/* Same element with both classes */
.button {
  &.primary { /* .button.primary */ }
}

When a rule fails, inspect whether the intended class is on the parent or on a child. This simple distinction explains many nesting bugs.

Common Mistake: Excessive Parent Context

A nested rule such as .page .dashboard .sidebar & makes a component dependent on several ancestors. It may work today but fail when the component moves to a modal or another route.

Prefer a component modifier, a semantic data attribute, or inherited custom property. Use parent context when context is genuinely the public styling input.

Common Mistake: Nesting Every Rule

Flat CSS remains valid and often clearer. Independent selectors such as .card-title and .card-body do not need to be nested when their class names already establish ownership and low specificity is valuable.

Choose nesting when it improves reading and maintenance, not to satisfy a formatting rule.

Common Mistake: Using Nesting for Layout Spacing

Nested margins on each child are often less robust than container-owned gap. Grid and Flexbox can express sibling spacing without directional exceptions or last-child resets.

.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

Nesting is an organizational syntax, not a substitute for modern layout tools.

Parsing and Invalid Nested Rules

Browsers parse native nesting as CSS, not as a preprocessor language. If a nested selector or declaration is invalid, normal CSS error-recovery rules apply. The invalid portion can be discarded while surrounding valid rules continue to work, which sometimes makes a syntax problem look like an isolated missing style rather than a complete stylesheet failure.

Inspect the browser console and matched-rule panel when a nested block disappears. Check balanced braces, selector syntax, unsupported preprocessor features, and whether the nested construct is permitted in that context. A formatter can make indentation consistent, but indentation itself has no syntactic meaning.

Source Order and the Cascade

Nesting does not create a private cascade. The resulting declarations retain their place in stylesheet order and compete with flat rules through origin, importance, cascade layer, specificity, scope, and source order. A state nested near a component can still lose to a later rule in a higher-priority layer or to an inline declaration.

@layer components, utilities;

@layer components {
  .button {
    color: white;

    &.muted { color: #667085; }
  }
}

@layer utilities {
  .text-danger { color: #b42318; }
}

If one button has all three classes, the later utilities layer wins for a normal declaration even though the component modifier is nested. Nesting changes source organization; the cascade still decides authority.

Nesting with @scope

The @scope rule limits selectors to a defined subtree, while nesting groups relationships inside a style rule. They can complement each other when a feature area needs bounded reach and internally organized components.

@scope (.account-panel) to (.nested-widget) {
  .button {
    background: #175cd3;

    &:hover { background: #1849a9; }
  }
}

The scope defines where the rule is allowed to match; nesting defines the button's state relationship. Browser requirements for newer features should be verified before production use, and a scope should not replace clear component classes.

Component Boundaries and Nested Components

A parent component may contain another component with similarly named internal parts. A broad selector such as .card { .title {} } can unintentionally reach titles inside nested cards. Explicit part classes, direct-child combinators, or a documented scope boundary can prevent leakage.

.card {
  > .card-header > .card-title {
    font-size: 1.5rem;
  }
}

Use only the structural restrictions the contract requires. Excessively precise child chains become brittle, while overly broad descendant selectors can cross component boundaries. Test a component nested inside another instance to expose accidental reach.

Refactoring Flat CSS into Nesting

Migration should preserve selector meaning before changing architecture. Group an existing component's base rule, same-element states, and tightly owned descendants. Compare each nested rule with the original flattened selector and run regression tests. Do not simultaneously rename classes, change layer order, and alter responsive behavior unless the changes can be reviewed independently.

Leave globally reusable classes flat. If moving a rule inside a parent would add specificity or require a new ancestor relationship, that move is not a neutral formatting change. The best migration often nests states while retaining independent component-part classes as flat rules.

Code Review Questions

Reviewers should ask what selector the nested rule effectively creates, whether & targets the intended element, and whether the relationship remains valid if markup changes. Check nesting depth, selector-list expansion, specificity, component leakage, conditional-rule ownership, and compatibility with the build pipeline.

Also ask whether nesting is solving the right problem. A custom property may be better for theming, gap may be better for spacing, a cascade layer may be better for authority, and a container query may be better for responsive structure. Nesting should organize a correct solution rather than conceal an inappropriate one.

Performance Considerations

Native nesting is parsed into selector behavior that browsers evaluate through the normal style system. Shallow component selectors do not require special performance treatment. Problems are more likely to arise from large DOM trees, broad relational selectors, excessive selector combinations, frequent state changes, or expensive layout and paint effects.

Optimize for clear ownership first and measure real pages before changing correct selectors for speculative speed. Avoid deep nesting primarily because it harms maintainability and structural resilience; any selector-matching cost is an additional reason, not the sole argument.

Compatibility and Build Tools

Modern browsers support native CSS nesting, but projects targeting older versions may still need a transformation step. Confirm the exact syntax supported by the build pipeline because a plugin may implement an older draft or Sass-like behavior rather than current native semantics.

Test production output and source maps after changing processors, minifiers, or browser targets. Avoid silently shipping nested syntax to an unsupported browser if the base styling depends on it.

Debugging Nested CSS

When a rule fails, flatten it mentally or in a small test. Check whether & attaches to the same element, whether a descendant or combinator relationship matches the actual markup, and whether a selector list expanded as expected.

Then inspect specificity, cascade layer, source order, conditional query state, browser parsing, and competing declarations. A nested block can be valid while its selector simply matches no element.

Browser DevTools

Developer tools show matched rules and effective selectors, often preserving enough nesting context to trace the source. Use source maps when a build tool flattens native or preprocessor nesting.

Inspect the selected element rather than guessing from indentation. Confirm pseudo-class state, attributes, ancestor contexts, active media or container conditions, and the winning declaration.

Testing Strategy

Component tests should cover default, hover where meaningful, keyboard focus, active, disabled, semantic attribute states, validation, reduced motion, responsive conditions, and theme contexts. Verify that selectors do not leak into nested components with similar part names.

Static analysis can limit nesting depth, prohibit generic deep selectors, and flag unsupported Sass-style concatenation. Visual and interaction tests confirm that organizational changes did not alter behavior.

Nesting Decision Guide

CSS Nesting Reference

Common Interview Questions

What is native CSS nesting? It is browser-supported CSS syntax that places selectors and supported conditional rules inside another style rule.

What does & represent? It represents the current parent selector in the nested context.

What is the difference between nested .active and &.active? The first targets an active descendant; the second targets the parent element when it also has the active class.

Can media and container queries be nested? Yes. Their declarations can remain close to the component rule while retaining their normal query semantics.

Does nesting lower specificity? No. The effective selector still participates normally in specificity and the cascade.

Is native nesting identical to Sass? No. Common patterns overlap, but Sass is a compiled language with additional behavior, including selector-construction patterns that should not be assumed in native CSS.

What is the main nesting risk? Deep nesting can hide high-specificity selectors and couple styles tightly to DOM structure.

Practical Review Checklist

• Use nesting for component states and tightly owned parts.
• Use & for same-element states, attributes, modifiers, and pseudo-elements.
• Distinguish modifiers from descendants before writing the selector.
• Keep nesting shallow and flatten selectors mentally during review.
• Avoid mirroring the page DOM or relying on generic element depth.
• Preserve meaningful class names and component boundaries.
• Place base declarations before child, state, and conditional rules.
• Use gap, Grid, and Flexbox for layout rather than spacing hacks.
• Combine nesting with cascade layers for authority, not as a replacement for them.
• Use semantic attributes and accessible focus states.
• Keep reduced-motion and responsive behavior near the component when helpful.
• Do not assume Sass concatenation or every preprocessor feature works natively.
• Verify browser and build-tool support against project targets.
• Test effective selectors, specificity, state combinations, and nested component leakage.

Key Takeaway

Native CSS nesting keeps related component rules together and reduces repeated parent selectors. Descendants can be nested directly, while & expresses same-element states, attributes, modifiers, pseudo-elements, and ancestor contexts. Conditional media, container, and support rules can remain beside the declarations they modify.

The feature succeeds only when the expanded selectors remain good CSS. Keep nesting shallow, avoid reproducing the DOM hierarchy, preserve meaningful classes, and remember that specificity and the cascade still apply. Use nesting for locality, cascade layers for authority, custom properties for configuration, and modern layout tools for spacing and structure. That separation produces CSS that is concise without becoming hidden or tightly coupled.