CSS Nesting ↔ Flat Converter

Convert CSS in both directions: expand nested CSS (the native & parent-selector syntax) into flat, legacy-compatible rules — or group flat CSS rules that share a common parent selector into a nested block. Useful when adopting CSS nesting gradually, auditing what native nesting outputs, or migrating away from Sass.

How to use the CSS Nesting ↔ Flat Converter

1. Choose the direction: Nested → Flat expands native CSS nesting blocks (using &) into separate flat rules; Flat → Nested groups rules that share a common selector prefix into nested blocks. 2. Paste your CSS into the input textarea. 3. Click Convert (or use the Example button to load sample input). The converted CSS appears in the output. The converter handles & as parent selector, compound selectors, pseudo-classes, pseudo-elements, descendant combinators, and nested @media queries. Complex edge cases like :is() with arbitrary selectors may need manual review.

Native CSS nesting — what it is and how & works

CSS nesting (CSS Nesting Module Level 1, Baseline 2024) lets you write rules inside other rules, with & representing the parent selector. This mirrors Sass/SCSS nesting but is native to the browser — no preprocessor required. A nested rule like .card { &:hover { color: blue; } } is exactly equivalent to .card:hover { color: blue; } as a flat rule.

The & token is required in some positions (e.g., pseudo-elements: &::before) and optional in others (a bare selector inside a rule is implicitly treated as a descendant). Nested @media queries are also supported: .card { @media (max-width: 600px) { font-size: .9rem; } } — they expand to the equivalent flat query wrapping the parent selector.

Reasons to convert: you may want to audit what your nesting expands to, ship a CSS bundle to browsers that do not support nesting (older Safari, older Chrome for WebViews), or migrate from a Sass project that has established flat-CSS conventions. The flat-to-nested direction helps when refactoring a large flat stylesheet into a more maintainable nested structure.

Common use cases

  • Legacy-browser bundles — expand native nesting to flat CSS for a compatibility bundle served to older browsers or WebViews that do not support nesting.
  • Sass migration — convert existing Sass nesting habits to native CSS nesting syntax (without the Sass-specific ampersand-only requirement in all positions).
  • Code review and diffing — flatten a nested stylesheet to see the equivalent flat selectors clearly before reviewing specificity or debugging cascade issues.
  • Refactoring flat stylesheets — group repetitive flat rules that share a parent into nested blocks to reduce repetition and improve readability.
  • Learning and exploration — understand exactly what native nesting produces so you can reason about specificity correctly.

Frequently asked questions

Does native CSS nesting work in all browsers?
As of 2024, native CSS nesting is Baseline 2024 — supported in Chrome 120, Firefox 117, and Safari 17.2. Older versions of these browsers (especially Safari < 16) do not support it, so a flat fallback may be needed for wide compatibility.

Is native CSS nesting exactly the same as Sass nesting?
Mostly, but not identical. In Sass, & is optional for pseudo-classes — .btn { :hover { } } is valid. In native CSS, any bare selector inside a rule is treated as a descendant, not a compound selector, so you must write &:hover explicitly. The converter handles this distinction.

Can the converter handle @media inside nested rules?
Yes — the nested-to-flat direction unwraps @media blocks inside a parent rule and wraps them around the flattened parent selector. Complex nested @media stacks may require manual adjustment.

What does & represent exactly?
& is the "nesting selector" — it refers to the list of selectors the enclosing rule matches. In .card { &:hover { } }, & expands to .card, producing .card:hover. When used at the start of a rule with no preceding combinator, it creates a compound selector.

Does specificity change between nested and flat CSS?
No — the specificity is identical. .card &:hover has the same specificity as .card:hover regardless of whether it is written nested or flat. The browser resolves nested rules to their flat equivalents before computing specificity.