CSS Nesting Converter

How the CSS Nesting Converter works

Native CSS nesting lets you write child rules inside a parent rule, the way Sass and Less have allowed for years, but without a build step. Instead of repeating .card on five lines you write it once and nest h3, &:hover and a media query inside it. Every current browser supports it: Chrome and Edge 120, Safari 17.2 and Firefox 117 handle the relaxed syntax used here.

Converting matters in both directions. Flattening is useful when a linter, an email template, an older browser or a CSS tool you rely on does not understand nesting yet. Nesting is useful when you are tidying an old stylesheet and want related rules kept together.

How to use the CSS nesting converter

1. Choose a direction: flatten nested CSS, or nest flat CSS.
2. Paste your stylesheet into the box.
3. Copy the result. Comments are removed during conversion, so keep your original if they matter.

How flattening works

When the parent is a complex selector and & is not at the start, the parent is wrapped in :is(). That matches how browsers read native nesting, and it avoids changing which elements match. @keyframes, @font-face and similar blocks are copied through unchanged.

How nesting works

The tool looks at each rule's leading class, ID or element. Rules next to each other that start with the same one are grouped. .card, .card h3 and .card:hover become one .card block holding its own declarations, then & h3 and &:hover. Rules inside a @media block are grouped the same way within that block.

Only neighbouring rules are merged, on purpose. Moving a rule earlier or later in a stylesheet can change which declaration wins when two rules have the same specificity. Grouping only adjacent rules keeps the cascade order you already had.

Tips and pitfalls

& versus no &. In native CSS, h3 inside .card means a descendant, the same as & h3. But :hover written without & means .card :hover, any hovered descendant. Always write &:hover and &.active when you mean the element itself. The nested output always includes &, which also works in the few browsers that only support the stricter early syntax.

No string concatenation. Sass lets you write &__title to build .card__title. Native CSS nesting does not, because & stands for a whole selector, not text. The flatten mode substitutes the parent as text, so Sass input with &__title still comes out as .card__title, but the nested original would not work in a browser.

Specificity can rise. The :is() wrapper takes the specificity of its most specific argument. A rule nested under #main, .content behaves as if it had an ID in every branch. Flattening shows you exactly what that looks like.

Do not nest too deep. Three levels are usually the limit before a stylesheet gets hard to read and selectors become longer than they need to be. Flatten, then nest again, to see the real selectors you were writing.

Declarations after nested rules. Older browsers moved any declaration that came after a nested rule up to the top of its block. Keep declarations first, then nested rules, which is also the order the nest mode produces.

Reading the result

In flat output, each rule appears in source order with selectors from a list on separate lines, and consecutive rules under the same media query share one @media block. In nested output, a block's own declarations come first, followed by a blank line and each nested rule. Rules that could not be grouped, such as one starting with an attribute selector, are copied through flat.

Related tools