Skip to main content

& nesting selector

The CSS & nesting selector 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 {{cssxref(":is", ":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 {{cssxref('Pseudo-classes', '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​

{{EmbedLiveSample('Original_CSS_styles','100%','65')}}

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​

{{EmbedLiveSample('Nested_CSS_styles','100%','65')}}

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.

{{EmbedLiveSample('Usage_outside_nested_rule','100%','65')}}

Specifications​

Browser compatibility​

See also​