Selectors and the cascade

Nesting

Widely availablesince Jun 2026

Replaces: A preprocessor kept only for nesting. Rules nest natively, including media and container queries inside the rule they modify.

See it working

The syntax

.button {
  background: var(--ink);
  &:hover  { background: var(--brand); }
  & .icon  { margin-inline-end: 6px; }
  @media (width < 600px) { width: 100%; }
}

The demo’s full CSS

.dm-nest { display: grid; place-items: center; min-height: 110px; }
.dm-nest-btn {
  font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px;
  border: 0; border-radius: 10px; background: #0a0a0f; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center;
  & i { width: 9px; height: 9px; border-radius: 50%; background: #f05a28; margin-inline-end: 8px; }
  &:hover { background: #4f46e5; }
  &:hover i { background: #fff; }
}

For browsers without it

A browser without nesting drops the nested rules, so the button would lose its hover colour and its dot. If that browser matters, keep the build step that flattens nesting for one more year; the source can be written nested today either way.