Native CSS Nesting Is Finally Here!

1. The “Unofficial” Feature We Used for a Decade

If you wrote frontend code several years ago, you are certainly familiar with Sass or Less. These CSS preprocessors have one feature loved by nearly every developer: selector nesting. It lets us write child selector rules inside a parent selector, much like writing HTML, greatly improving code readability and organization.

// Sass 语法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

For years, we relied on build tools to compile this syntax into ordinary CSS that browsers could understand. Now, however, things have changed.

2. Native CSS Nesting Arrives

Starting in early 2023, major browsers including Chrome, Safari, and Firefox successively announced support for the native CSS Nesting Module. This means we can write nested rules directly in .css files without any preprocessing.

The example above can be written in native CSS like this:

/* 原生 CSS 语法 */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Yes, it looks exactly like Sass!

3. The Important Role of &

As in preprocessors, the & symbol plays a key role in native nesting: it represents the parent selector. This is especially useful when handling pseudo-classes, pseudo-elements, or combined selectors.

.card {
  background: white;
  border-radius: 8px;

  /* & 代表 .card */
  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* & 代表 .card，组合成 .card.dark-mode */
  &.dark-mode {
    background: #333;
  }

  /* & 代表 .card，组合成 .card > .header */
  > .header {
    font-weight: bold;
  }
}

4. One Small but Important Difference from Sass

In Sass, you can nest a class selector directly, as in .card { .title { ... } }. This was not allowed in early versions of the native CSS Nesting specification: every nested rule had to begin with a symbol such as &, >, +, or ~.

Although the latest specification relaxed this restriction and permits directly nested type selectors, such as article { h1 { ... } }, using & remains the best practice when nesting class selectors because it is explicit and avoids ambiguity.

/* 推荐写法 */
.article {
  & .author-name {
    font-style: italic;
  }
}

/* 不推荐的写法 (在某些早期实现或严格解析器中可能无效) */
.article {
  .author-name {
    font-style: italic;
  }
}

Using & clearly expresses that .author-name is a descendant of .article.

5. Browser Support and the Future

As of September 2023, all major modern browsers—Chrome 112+, Safari 16.5+, and Firefox 117+—support CSS Nesting. This means we can begin adopting it gradually in production.

The arrival of native CSS nesting is another important milestone in the evolution of the Web platform itself. It reduces our dependence on build tools, makes CSS more powerful and expressive, and lets new frontend developers write and understand style code more intuitively.