CSS nesting

Baseline 2023 (Chrome 120 gelockerte Syntax, Safari 17.2, Firefox 117); breit verfügbar.

Chrome 120Edge 120Safari 17.2Firefox 117

Natives Verschachteln von Regeln in Regeln, inklusive `&` für das Elternelement, inline verschachtelter Media und Container Queries und verschachtelter Pseudoklassen. Nimmt vielen Teams den letzten Grund, Sass zu brauchen.

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: Ältere Browser verwerfen den ganzen verschachtelten Block; liefere flaches CSS aus einem Build-Schritt, wenn du sie unterstützen musst.

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

Prompt

Schreibe das Stylesheet mit nativem CSS Nesting: verschachtele Kindregeln und `&`-Pseudozustände im Komponentenblock und verschachtele `@media`/`@container` in der Regel, die sie verändern. Verschachtele nicht tiefer als drei Ebenen, verlass dich nicht auf einen Präprozessor und denk daran, dass verschachtelte Selektoren, die mit einem Elementnamen beginnen (z. B. `a{}`), in der gelockerten Syntax gültig sind.