CSS nesting

Baseline 2023 (Chrome 120 sintaxis relajada, Safari 17.2, Firefox 117); disponible de forma generalizada.

Chrome 120Edge 120Safari 17.2Firefox 117

Anidado nativo de reglas dentro de reglas, incluido `&` para el padre, media y container queries anidadas en línea y pseudoclases anidadas. Elimina la última razón por la que muchos equipos necesitaban 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: Los navegadores antiguos descartan todo el bloque anidado; sirve CSS plano desde un paso de build si tienes que soportarlos.

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

Prompt

Escribe la hoja de estilos con anidado nativo de CSS: anida las reglas hijas y los pseudoestados con `&` dentro del bloque del componente, y anida `@media`/`@container` dentro de la regla que modifican. No anides más de tres niveles, no dependas de un preprocesador y recuerda que los selectores anidados que empiezan por un nombre de elemento (p. ej. `a{}`) son válidos en la sintaxis relajada.