CSS nesting

Baseline 2023 (Chrome 120 sintaxe relaxada, Safari 17.2, Firefox 117); amplamente disponível.

Chrome 120Edge 120Safari 17.2Firefox 117

Aninhamento nativo de regras dentro de regras, incluindo `&` para o pai, media e container queries aninhadas inline, e pseudo-classes aninhadas. Elimina o último motivo pelo qual muitas equipes precisavam de Sass.

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; }

HTML

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

Fallback: Navegadores mais antigos descartam o bloco aninhado inteiro; entregue CSS plano a partir de um passo de build se precisar suportá-los.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

Prompt

Escreva a folha de estilo com aninhamento nativo de CSS: aninhe regras filhas e pseudo-estados com `&` dentro do bloco do componente, e aninhe `@media`/`@container` dentro da regra que eles modificam. Não aninhe mais de três níveis, não dependa de pré-processador, e lembre que seletores aninhados que começam com nome de elemento (ex.: `a{}`) são válidos na sintaxe relaxada.