CSSCSS NestingModern CSSSass Alternative

Native CSS Nesting: Sass-Style Nesting Without a Build Step

CSS nesting is now supported in all modern browsers. Write cleaner, context-aware CSS without Sass, PostCSS, or any preprocessor — pure CSS that ships today.

U

UIXplor Team

February 25, 2026 · 5 min read

✦

01Before & After Native Nesting

Before (flat CSS):

css
.card { background: #1a1a2e; }
.card:hover { background: #1e1e3a; }
.card .title { font-size: 1.25rem; }
.card .title:hover { color: #B8FB3C; }

After (native nesting):

css
.card {
  background: #1a1a2e;
  &:hover { background: #1e1e3a; }
  .title {
    font-size: 1.25rem;
    &:hover { color: #B8FB3C; }
  }
}

02The & Selector

`&` refers to the parent selector. Omit it and the nested rule becomes a descendant selector:

css
.button {
  color: white;
  &:hover { opacity: 0.85; }       /* .button:hover */
  &.active { background: #B8FB3C; } /* .button.active */
  .icon { width: 1rem; }            /* .button .icon */
}

You can also use `&` at the end: `nav & { }` means 'when .button is inside nav'.

03Nesting Media Queries

css
.hero {
  font-size: 2rem;
  @media (max-width: 768px) {
    font-size: 1.5rem;
  }
  @media (prefers-color-scheme: dark) {
    background: #0a0a0f;
  }
}

Media queries nested inside a rule apply to that rule — dramatically reducing repetition in responsive CSS.

Related UI Components

◈

Collections

All UI component collections

Back to Blog