Don't like ads? Go Ad-Free Today 

CSS Nesting Converter

DeveloperText

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

CSS Nesting Converter

The CSS Nesting Converter transforms stylesheets between native CSS nesting (using the & selector) and flat CSS, in either direction. Paste nested CSS to expand every & and parent selector into plain rules that older browsers understand, or paste flat CSS to group related rules under a shared parent with clean, modern nesting. It handles the tricky parts that hand-editing and AI text boxes routinely get wrong: selector lists, pseudo-classes, pseudo-elements, combinators, and media queries.

How to Use

Paste your CSS into the input box.
Choose a direction: Nested → Flat to expand & selectors, or Flat → Nested to group rules with &.
Toggle Preserve comments if you want comments kept in the output.
The converted CSS appears instantly on the right — copy it or download it as a .css file.

Features

Bidirectional conversion – expand nested CSS to flat, or collapse flat CSS into native nesting.
Accurate & expansion – correctly resolves the nesting selector for pseudo-classes, pseudo-elements, attribute selectors, and chained compounds.
Combinator aware – preserves child (>), adjacent sibling (+), and general sibling (~) combinators.
Selector lists – performs the correct cartesian expansion when parent or child selectors contain commas.
At-rule support – keeps nested @media and similar blocks intact during conversion.
Private and instant – runs entirely in your browser with no upload, plus copy and download buttons.

 FAQ

What is native CSS nesting and how does it differ from Sass?

Native CSS nesting is a feature built directly into the CSS language (no preprocessor required) that lets you write rules inside other rules. Unlike Sass, where the ampersand and nesting are resolved at compile time by a build tool, native nesting is parsed by the browser itself. The semantics also differ subtly: in native CSS a nested style rule that starts with an identifier is treated as if it were prefixed with the ampersand descendant combinator, and the cascade and specificity follow the official CSS Nesting specification rather than Sass conventions.
What does the ampersand (&) selector mean in CSS nesting?

The ampersand is the nesting selector. It represents the parent rule's selector list at the point where it appears. Writing &:hover inside a .card rule expands to .card:hover, attaching the pseudo-class to the same element. When a nested selector omits the ampersand, the browser implicitly relates it to the parent as a descendant, so .title inside .card behaves like .card .title.
Does converting nested CSS to flat CSS change specificity?

A straightforward expansion that concatenates parent and child selectors preserves the resulting compound selectors, so specificity is generally identical. The main caveat is when nesting is combined with selector lists: the parent selector list is distributed across each nested selector (a cartesian expansion), which can produce longer comma-separated selectors. The individual specificity of each generated selector matches what the browser computes for the nested form.
Why would I flatten nested CSS for older browsers?

Native CSS nesting only shipped in mainstream browsers relatively recently, so visitors on older browser versions will ignore nested rules entirely, leaving styles unapplied. Flattening expands the nesting into plain, widely-supported selectors that every browser understands. This is useful when you author in the modern nested syntax for readability but need a fallback stylesheet, or when a build pipeline lacks a CSS nesting transform.