CSS Nesting

One of our favorite CSS preprocessor features is now built into the language: nesting style rules.

Adam Argyle

Before nesting, every selector needed to be explicitly declared, separately from one another. This leads to repetition, stylesheet bulk and a scattered authoring experience.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

After nesting, selectors can be continued and related style rules to it can be grouped within.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Try this in browser.

Nesting helps developers by reducing the need to repeat selectors while also co-locating style rules for related elements. It can also help styles match the HTML they target. If the .nesting component in the previous example was removed from the project, you could delete the entire group instead of searching files for related selector instances.

Nesting can help with: - Organization - Reducing file size - Refactoring

Nesting is available from Chrome 112 and also available to try in Safari Technical Preview 162.

Getting started with CSS Nesting

Throughout the rest of this post,the following demo sandbox is used to help you visualize the selections. In this default state, nothing is selected and everything is visible. By selecting the various shapes and sizes, you can practice the syntax and see it in action.

Inside the sandbox are circles, triangles, and squares. Some are small, medium or large. Others are blue, pink or purple. They're all inside the .demo containing element. The following is a preview of the HTML elements you'll be targeting.

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

Nesting examples

CSS nesting allows you to define styles for an element within the context of another selector.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

In this example, the .child class selector is nested within the .parent class selector. This means that the nested .child selector will only apply to elements that are children of elements with a .parent class.

This example could alternatively be written using the & symbol, to explicitly signify where the parent class should be placed.

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

These two examples are functionally equivalent and the reason you have options will become clearer as more advanced examples are explored in this article.

Selecting the circles

For this first example, the task is to add styles to fade and blur just the circles inside the demo.

Without nesting, CSS today:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

With nesting, there are two valid ways:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

or