CSS Nesting Selector

The CSS nesting selector (&) explicitly represents the element or elements matched by the parent style rule within a nested CSS rule. It can be combined with other selectors to describe relationships between the parent selector and elements matched by the nested rule.

Syntax

The nesting selector is represented by an ampersand (&) inside a nested style rule:

.parent {
  & .child {
    property: value;
  }
}

In this example, & represents the selector of the parent style rule. The nested selector therefore represents .parent .child.

How the Nesting Selector Works

The nesting selector provides an explicit reference to the parent selector while writing nested CSS. This makes it possible to build selectors relative to the parent without repeating the complete parent selector.

.card {
  & .title {
    color: #0088cc;
  }
}

The nested rule selects elements with the title class that are descendants of elements matched by .card.

Selecting Nested Descendants

For descendant relationships, modern CSS nesting can often omit the nesting selector because whitespace between the parent and nested selector is implied.

.card {
  .title {
    color: #0088cc;
  }
}

This nested rule represents the same descendant relationship as .card .title. The explicit & is useful when the parent selector needs to appear in a particular position or be combined with other selector syntax.

Combining with Other Selectors

The nesting selector can be combined with pseudo-classes and other selector syntax to apply styles based on the state or characteristics of the parent-matched element.

.button {
  &:hover {
    background-color: #0088cc;
    color: #fff;
  }
}

Here, &:hover represents the parent selector with the :hover pseudo-class applied. For a parent selector of .button, the resulting selector behaves like .button:hover.

Changing the Selector Context

The nesting selector does not have to appear at the beginning of a nested selector. Placing another selector before & can describe a context in which the parent-matched element should be selected.

.notice {
  .dark-theme & {
    color: #fff;
  }
}

In this example, the nested rule selects an element matched by .notice when it is a descendant of an element with the dark-theme class. This corresponds to the relationship expressed by .dark-theme .notice.

Specificity

The nesting selector itself does not simply add a separate specificity value. The specificity behavior of & is similar to :is(): its specificity is based on the most specific selector in the associated parent selector list.

For a parent rule containing a single selector, this commonly produces the same specificity as writing the equivalent unnested selector.

Nested CSS	Equivalent Selector	Specificity
`.card { & p { ... } }`	`.card p`	`0-1-1`
`.card { & .title { ... } }`	`.card .title`	`0-2-0`
`#content { & p { ... } }`	`#content p`	`1-0-1`

When the parent rule uses a selector list, the specificity behavior can differ from simply expanding the nested rule into separate selectors because the most specific selector in the parent selector list determines the specificity contributed through the nesting selector.

Nesting Selector Example

The following example uses the nesting selector with a descendant selector and the :hover pseudo-class. The nested rules remain grouped with the parent .card rule.

.card {
  & .title {
    color: #0088cc;
  }
  &:hover {
    background-color: #d8f1fc;
  }
}

Play in Editor

The nesting selector can be combined with other selectors and combinators to create relationships relative to a parent style rule:

Specifications

The nesting selector is defined in the CSS Nesting Module Level 1 specification.

CSS Nesting Selector