Flatten native CSS nesting into plain selectors, or group related flat CSS into clean nested blocks with &. Convert instantly, both directions, right in your browser.
Switch between flattening native nesting for maximum compatibility, or grouping repetitive flat selectors into a single readable nested block.
Type or paste CSS and watch the converted output update instantly on every keystroke.
Ampersand references to the parent selector are resolved into full, valid selectors.
Grab the converted CSS instantly with a status confirmation, ready to paste into your stylesheet.
Native CSS nesting lets you write related rules together, the way Sass and Less have allowed for years, but without a build step. A selector can contain another selector's block directly inside it, and the ampersand (&) stands in for the parent selector wherever you place it, so you can target combined states like &:hover or descendant elements like & .title without repeating the parent by hand. Browser support for native nesting is now solid across modern engines, but plenty of tooling, linters, and older codebases still expect flat CSS with one full selector per rule. This converter bridges that gap in both directions: it expands nested blocks into fully qualified flat selectors for maximum compatibility, and it can also fold repetitive flat selectors that share a common prefix back into a single tidy nested block, which is useful when refactoring an older stylesheet toward a more modern, readable structure.
The ampersand marks exactly where the parent selector should be substituted, letting you write pseudo-classes, combinators and compound selectors naturally inside a nested block.
Flat CSS is easier to search, diff in code review, and paste into environments that don't parse nesting syntax, including some minifiers and CSS-in-JS pipelines.
Grouping related rules under one parent selector keeps a component's styles visually together and reduces repeated typing of long class names.
The parser and generator are plain JavaScript that runs locally, so your CSS never leaves your browser.
Native CSS nesting lets you write one selector's rules inside another selector's block, using the & symbol to refer back to the parent selector, without a preprocessor like Sass.
Flat CSS is easier to search, diff in pull requests, and paste into tools or older codebases that don't support nesting syntax, and it works in every browser regardless of nesting support.
Yes. Switch to Flat to Nest mode and paste selectors that share a common base, such as .card, .card:hover and .card .title, and the tool groups them into a single nested block.
No. Parsing and conversion run entirely in your browser with plain JavaScript. Nothing is uploaded or stored outside your local browser storage.
Keep building with these free online CSS and code tools.