Home >CSS >CSS reference – properties, selectors, functions >Nesting rules (&)

Nesting rules (&)

.parent { … &:hover { … } .child { … } @media (…) { … } }

Rules can be written inside other rules, as only Sass or Less could before. A nested selector refers to the outer one; the & character stands for the outer selector where you need it explicitly – for states (&:hover), compound selectors (&.active) or at the end (.dark &).

Values

.child { } – the same as .parent .child.
&:hover, &.active – without a space: the same element with a state or a class.
> li, + p – a combinator at the start: .parent > li.
.dark & – & at the end: .dark .parent.
@media, @supports, @container, @layer – at-rules can be nested too; the declarations in them apply to the outer selector.

Examples

A whole component in one block:

.card {
  padding: 12px;
  border: 1px solid #ddd;
  & h3 {
    margin: 0 0 6px;
    color: #01579b;
  }
  &:hover { border-color: #0088d1; }
  &.highlighted { background: #fff3e0; }
  @media (min-width: 700px) {
    padding: 20px;
  }
}

It is the same as the rules .card, .card h3, .card:hover, .card.highlighted and @media (min-width: 700px) { .card { padding: 20px } }.

Things to watch out for

CSS cannot concatenate names as Sass does (&__title for .card__title) – & stands for the whole selector, not a piece of text.
An outer selector list behaves like :is(): in .a, #b { .c { } } the .c has the specificity 1-1-0 even inside .a.
Full support: Chrome since 120, Firefox since 117, Safari since 17.2. Chrome 112–119 and Safari 16.5–17.1 did not know a nested selector starting with an element name (h3 { }); the form & h3 works everywhere. Older browsers drop nested rules – the page must work without them.
Deep nesting ties the CSS to the structure of the HTML and increases specificity just like long selectors. Two or three levels are usually enough.

Browser support

Baseline – widely available: in all major browsers since December 2023, considered widely available since June 2026. Since version: Chrome 112 (fully since 120), Firefox 117, Safari 16.5 (fully since 17.2). As of October 2026 (MDN browser-compat-data).