Nesting

See it working

The syntax

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

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .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; } }

ResetCopy

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.

Before you ship it