& nesting selector

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The CSS & explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors relative to the parent element. Without the & nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were within :is().

Note: Child rule does not mean child element selector. A child rule can target parent element or child elements depending on use of the & nesting selector.

If not used in nested style rule, the & nesting selector represents the scoping root.

Syntax

parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

`&` nesting selector and whitespace

Consider the following code where nesting is done without the & nesting selector.

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

When the browser parses the nested selectors, it automatically adds whitespace between the selectors to create a new CSS selector rule. The following code shows the equivalent non-nested rules:

.parent-rule {
  /* parent rule style properties */
}

.parent-rule .child-rule {
  /* style properties for .child-rule descendants for .parent-rule ancestors */
}

When the nested rule needs to be attached (with no whitespace) to the parent rule, such as when using a pseudo-class or creating compound selectors, the & nesting selector must be immediately prepended to achieve the desired effect.

Consider an example where we want to style an element, providing styles to be applied at all times, and also nesting some styles to be applied only on hover. If the & nesting selector is not included, whitespace is added and we end up with a ruleset that applies the nested styles to any hovered descendant of the parent rule selector. This is, however, not what we want.

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule *:hover {
  /* child rule properties */
}

With the & nesting selector added with no whitespace, the elements matched by the parent rule will be styled when hovered.

.parent-rule {
  /* parent rule properties */
  &:hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule:hover {
  /* child rule properties */
}

Appending the `&` nesting selector

The & nesting selector can also be appended to reverse the context of the rules.

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

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

The & nesting selector can be placed multiple times:

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

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

Examples

Both of the following examples produce the same output. The first one uses normal CSS styles and the second one uses the & nesting selector.

Using normal CSS styles

This example uses normal CSS styling.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

Result

Using `&` in nested CSS styles

This example uses nested CSS styling.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

Result

Using `&` outside nested rule

If not used in nested style rule, the & nesting selector represents the scoping root.

<p>Hover over the output box to change document's background color.</p>

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

Result

In this case, all the styles apply to document.

Specifications

Specification
CSS Nesting Module # nest-selector

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`Nesting_selector`	120 112 Does not support nested rules that start with a type selector.	120 112 Does not support nested rules that start with a type selector.	117	106 98 Does not support nested rules that start with a type selector.	17.2 16.5 Does not support nested rules that start with a type selector.	120 112 Does not support nested rules that start with a type selector.	117	80 75 Does not support nested rules that start with a type selector.	17.2 16.5 Does not support nested rules that start with a type selector.	25.0 23.0 Does not support nested rules that start with a type selector.	120 112 Does not support nested rules that start with a type selector.

Syntax

& nesting selector and whitespace

Appending the & nesting selector

Examples

Using normal CSS styles

HTML

CSS

Result

Using & in nested CSS styles

HTML

CSS

Result

Using & outside nested rule

Result

Specifications

Browser compatibility

See also

`&` nesting selector and whitespace

Appending the `&` nesting selector

Using `&` in nested CSS styles

Using `&` outside nested rule