CSS Nesting

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

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

The result, all the elements inside .demo with a .circle class are blurred out and nearly invisible:

# Selecting any triangles and squares

This task requires selecting multiple nested elements, also called a group selector.

Without nesting, CSS today, there are two ways:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

or, using :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

With nesting, here are two valid ways:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

or

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

Both nesting options will use :is() under the hood as follows.

.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

The result, only .circle elements remain inside .demo:

# Selecting large triangles and circles

This task requires a compound selector, where elements must have both classes present in order to be selected.

Without nesting, CSS today:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

or

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

With nesting, here are two valid ways:

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

or

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

The result, all the large triangles and circles are hidden inside .demo:

# Pro tip with compound selectors and nesting

The & symbol is your friend here as it shows explicitly how to adjoin nested selectors. Consider the following example:

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

While a valid way to nest, the results won't match the elements you may expect. The reason is that without & to specify the desired outcome of .lg.triangle, .lg.circle compounded together, the actual result would be .lg .triangle, .lg .circle; descendant selectors.

# Selecting all the shapes except the pink ones

This task requires a negation functional pseudo class, where elements must not have the specified selector.

Without nesting, CSS today:

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

With nesting, here are two valid ways:

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

or

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

The result, all the shapes that aren't pink are hidden inside .demo:

# Precision and flexibility with &

Say you wanted to target .demo with the :not() selector. & is required for that:

.demo {
  &:not() {
    ...
  }
}

This compounds .demo and :not() to .demo:not(), as opposed to the previous example which needed .demo :not(). This reminder is made very important when wanting to nest a :hover interaction.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

# More nesting examples

The CSS specification for nesting is packed with more examples. If you're looking to learn more about the syntax through examples, it covers a wide range of valid and invalid examples.

The next few examples will briefly introduce a CSS nesting feature, to help you understand the breadth of capabilities it introduces.

# Nesting @media

It can be very distracting to move to a different area of the stylesheet to find media query conditions that modify a selector and its styles. That distraction is gone with the ability to nest the conditions right inside the context.

For syntax convenience, if the nested media query is only modifying the styles for the current selector context, then a minimal syntax can be used.

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

Using & explicitly can also be used:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

This example shows the expanded syntax with &, while also targeting .large cards to demonstrate additional nesting features continue working.

Learn more about nesting @rules.

# Nesting anywhere

All examples up to this point have continued or appended to a previous context. You can completely change or rearrange the context if needed.

.card {
  .featured & {
    /* .featured .card */
  }
}

The & symbol represents a reference to a selector object (not a string) and can be placed anywhere in a nested selector. It can even be placed multiple times:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

While this example is a bit useless looking, there are certainly scenarios where being able to repeat a selector context is handy.

# Invalid nesting examples

There are a few nesting syntax scenarios that are invalid and may surprise you if you've been nesting in preprocessors. A cheat sheet for valid nesting syntax can be found in the understanding the nesting parser section of this article.

# Nesting element tag names

HTML elements currently require the & symbol in front or being wrapped with :is().

.card {
  h1 {
    /* 🛑 h1 does not start with a symbol */
  }
}

Fixed with syntax like this:

.card {
  & h1 {
    /* ✅ now h1 starts with a symbol */
  }

  /* or */

  :is(h1) {
    /* ✅ now h1 starts with a symbol */
  }
}

# Nesting and concatenation

Many CSS class naming conventions count on nesting being able to concatenate or append selectors as if they were strings. This does not work in CSS nesting as the selectors are not strings, they're object references.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

A more in depth explanation can be found in the spec.

# Mixing nesting and declarations

Consider the following nesting CSS block:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

The color of .card elements will be blue.

Any intermixed style declarations are hoisted to the top, as if they were authored before any nesting occurred. More details can be found in the spec.

# Understanding the nesting parser

To have the most success with CSS nesting, authors can study the examples from the spec or they can learn how the CSS parser works with regards to nesting. With this knowledge, authors can confidently nest styles without constantly looking up rules.

The first and simplest way to think about the parser is to identify the symbols that signal to the parser that it's consuming nesting styles.

& @ : . > ~ + # [ *

Those symbols should look familiar. Some are combinators and some are for selectors. So at its most simplest, if the parser finds your nested selectors and it doesn't start with one of these symbols, it will fail and incorrectly consume your styles.

# Feature detection

There are two great ways to feature detect CSS nesting: use nesting or use @supports to check for nesting selector parsing capability.

Using nesting:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

Using @supports:

@supports (selector(&)) {
  /* nesting parsing available */
}

My colleague Bramus has a great Codepen showing this strategy.

# Debugging with Chrome DevTools

Current support in DevTools for nesting is minimal. Currently you will find styles are represented in the Styles pane as expected, but tracing the nesting and its full selector context is not yet supported. We have design and plans to make this transparent and clear.

Chrome 113 plans to have additional support for CSS nesting. Stay tuned.

# The future

CSS Nesting is only at version 1. Version 2 will introduce more syntactic sugar and potentially fewer rules to memorize. There's a lot of demand for the parsing of nesting to not be limited, to not have a list of symbols that trigger the parser.

Nesting is a big enhancement to the CSS language. It has authoring implications to almost every architectural aspect of CSS. This big impact needs to be deeply explored and understood before version 2 can effectively be specified.

As a final thought, here's a demo that uses @scope, nesting, and @layer all together. It's all very exciting!