Native CSS Nesting

Native CSS nesting lets you place related style rules inside another rule. Modern browsers parse this syntax directly, so you can organize component states, descendants, and media queries without a Sass or Less preprocessing step.

Nesting keeps selectors close to the component they affect. Used carefully, it can make a stylesheet easier to scan and maintain. Deep or unclear nesting still creates complex selectors, so keep the structure shallow and purposeful.

How Native CSS Nesting Works

A nested rule uses the outer selector as its context. You can write a descendant selector directly, or use the & nesting selector to show exactly where the outer selector belongs.

Example:

/* Style headings that appear inside a card. */
.card {
  padding: 1rem;

  & h2 {
    color: #265fc7;
  }
}

The browser treats the nested heading rule like .card h2. The ampersand represents the matched outer selector.

Create a Nested Component

This runnable example groups the heading, price, button states, and featured variation inside the card rule. It also changes the grid layout on narrow screens.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Native CSS Nesting Demo</title>
  <style>
    /* Create a simple responsive pricing layout. */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 2rem;
      color: #253545;
      background: #f4f7fb;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      max-width: 760px;
      margin: auto;
    }

    .card {
      padding: 1.5rem;
      border: 1px solid #ccd5df;
      border-radius: 12px;
      background: white;

      & h2 {
        margin-top: 0;
      }

      & .price {
        color: #265fc7;
        font-size: 1.6rem;
        font-weight: 700;
      }

      & button {
        padding: 0.65rem 1rem;
        border: 0;
        border-radius: 6px;
        color: white;
        background: #265fc7;
        cursor: pointer;

        &:hover,
        &:focus-visible {
          background: #174494;
        }
      }

      &.featured {
        border-color: #ed8b24;
        box-shadow: 0 6px 20px rgb(37 53 69 / 12%);
      }
    }

    @media (max-width: 650px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <main class="card-grid">
    <article class="card">
      <h2>Starter</h2>
      <p class="price">Rs.499</p>
      <button type="button">Choose Starter</button>
    </article>

    <article class="card featured">
      <h2>Team</h2>
      <p class="price">Rs.999</p>
      <button type="button">Choose Team</button>
    </article>
  </main>
</body>
</html>

Use the & Nesting Selector

Place & where the outer selector should appear. This makes pseudo-classes, state classes, and reversed context selectors clear.

Example:

/* Add interaction, a component variation, and a theme context. */
.notice {
  &:hover {
    border-color: #265fc7;
  }

  &.warning {
    background: #fff4df;
  }

  .dark-theme & {
    color: white;
  }
}
Nested selector Meaning
&:hover The outer element while hovered
&.warning The outer element when it also has the warning class
.dark-theme & The outer element inside a dark-theme ancestor

Note: Native nesting cannot join text to the ampersand. A Sass pattern such as &__title is invalid native CSS. Write the complete child class, such as .card__title, instead.

Nest Combinators and Sibling Rules

You can start a nested selector with a combinator to describe direct children or siblings.

Example:

/* Limit spacing to direct list items and their following siblings. */
.steps {
  > li {
    padding: 0.5rem;
  }

  > li + li {
    border-top: 1px solid #ccd5df;
  }
}

Nest Media and Feature Queries

A nested conditional rule applies its declarations in the context of the outer selector. This keeps a component's responsive adjustment next to its base styles.

Example:

/* Change only the panel layout on smaller screens. */
.panel {
  display: grid;
  grid-template-columns: 2fr 1fr;

  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }
}

Understand Specificity

A nested selector list calculates specificity in a way similar to :is(): the most specific selector in the outer list can influence each nested rule. Avoid mixing very different specificity levels in one outer selector list when that makes later overrides surprising.

Example:

/* The ID in this list affects the nested rule's specificity. */
.card, #featured-card {
  & .title {
    color: #253545;
  }
}

Native Nesting and Sass Nesting

Native CSS Sass
Runs directly in supporting browsers Compiles to CSS before delivery
Follows the CSS nesting specification Includes Sass-specific nesting features
Cannot concatenate & with a suffix Supports patterns such as &__item

Check the browser versions supported by your project before removing a build-time fallback. Native CSS nesting is broadly available in current browsers, but older browser versions do not understand it and will ignore invalid nested rules.

Conclusion

Native CSS nesting organizes component descendants, states, variants, and conditional rules without preprocessing. Use & when its position matters, keep nesting shallow, avoid Sass-only concatenation, and watch specificity in selector lists. A clear nested structure can reduce repetition while preserving valid, maintainable CSS.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram