# CSS nesting

Status: Baseline 2023 (Chrome 120 relaxed syntax, Safari 17.2, Firefox 117); widely available.  
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting  
Page: https://designforai.dev/css/nesting

Native nesting of rules inside rules, including `&` for the parent, media and container queries nested inline, and nested pseudo-classes. Removes the last reason many teams needed Sass.

## HTML

```html
<nav class="fx-003"><a href="#" aria-current="page">Home</a><a href="#">Docs</a><a href="#">Blog</a></nav>
```

## CSS

```css
.fx-003{
  display:flex;gap:4px;font-family:system-ui;
  a{
    padding:8px 14px;border-radius:999px;color:#333;text-decoration:none;
    &:hover{background:#eee}
    &[aria-current=page]{background:#111;color:#fff}
  }
  @media (width < 480px){flex-direction:column}
}
.fx-003 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```

Fallback: Older browsers drop the whole nested block; ship flat CSS from a build step if you must support them.

## Prompt

Write the stylesheet with native CSS nesting: nest child rules and `&` pseudo-states inside the component block, and nest `@media`/`@container` inside the rule they modify. Do not nest deeper than three levels, do not rely on a preprocessor, and remember that nested selectors starting with an element name (e.g. `a{}`) are valid in the relaxed syntax.