CSS Nesting Converter

What CSS nesting is

CSS Nesting lets you write child rules and pseudo-classes directly inside a parent selector's block, the way Sass/SCSS has always allowed, but as native browser syntax — no build step required:

.card {
  color: #1a1a1a;

  & .title {
    font-size: 20px;
  }

  &:hover {
    background: #f5f5ff;
  }
}

Native CSS Nesting shipped in all major browsers in 2023 (Chrome 112, Firefox 117, Safari 17.2), and the & nesting selector is the key piece — it stands in for the full parent selector wherever it appears, so &:hover becomes .card:hover and & .title becomes .card .title. Compared to Sass/Less, native nesting is a subset: it supports & and simple nested blocks (including nested @media/@supports), but not Sass-only features like mixins, functions, or @extend.

Why flatten it back out

Most tooling, older browsers, some CSS linters, and CSS-in-JS pipelines still expect flat, one-selector-per-rule stylesheets. This tool takes nested CSS and expands it into the equivalent flat rules — the same transformation Sass and PostCSS nesting plugins perform — so you get output that works everywhere, including in environments that don't yet parse native nesting.

How to use it

1. Paste your nested CSS (using & and/or plain nested blocks) into the input box.
2. The flattened, plain-CSS equivalent appears instantly in the output box — one selector per rule, with & fully substituted and nested-without-& blocks joined with a descendant space.
3. Copy or download the result as a .css file.

The converter tracks brace depth through arbitrarily deep nesting, substitutes every & occurrence in a selector, and correctly re-wraps nested @media/@supports blocks around the selectors declared inside them.

Scope

This tool supports flattening nested CSS into flat CSS only — the well-defined, tractable direction (the reverse, grouping unrelated flat rules back under a shared parent, requires heuristics about which selectors "belong together" that can't be verified as universally correct, so it's intentionally out of scope). If your input has no nested selectors, the output will look the same as the input, just re-formatted.

FAQ

Does it handle > .child, + .sibling, and ~ .sibling combinators? Yes — write them exactly as you would in native nesting (> .footer { ... }), and the combinator is preserved verbatim in the flattened selector (.card > .footer).

What happens to comma-separated selector lists? Each nested rule can have a comma-separated selector list on either side; the tool expands every parent × child combination, matching native nesting semantics.

Does it support nested @media or @supports? Yes — at-rules nested inside a rule (or containing nested rules) are re-wrapped around the flattened selectors, preserving their condition text.

Will it validate my CSS? No — this is a structural transformer, not a CSS validator. Malformed input (unbalanced braces) is parsed as best-effort; if parsing fails entirely, the output shows a short error comment instead of throwing.

Privacy

All conversion happens in your browser — your CSS is never uploaded or stored anywhere.