CSS Nesting Converter
Convert between native nested CSS and flat rules, showing the selector each nesting level actually produces and warning where nesting depth is building specificity nobody intended.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Nesting arrived in CSS itself
For years nesting was the main reason to use a preprocessor. It is now native, supported in every current browser, and behaves slightly differently from the preprocessor version in ways that matter. The ampersand refers to the enclosing selector as a whole rather than being a text substitution, so nesting inside a selector list produces a different and usually more correct result than the string concatenation preprocessors performed.
Depth is specificity, and specificity is a trap
Each level of nesting adds to the selector, and a rule four levels deep produces something like a nav inside a header inside a container inside a wrapper. That selector is hard to override, which means the next person adding a style writes something even more specific, and the escalation continues until the codebase is full of important declarations. Nesting makes deep selectors easy to write without their cost being visible, which is why flattening the output is worth looking at.
The ampersand is not optional where it matters
Nesting a bare element selector inside a rule targets a descendant, so a button nested inside a card styles buttons within the card. Attaching the ampersand instead compounds the selector, so it targets an element that is both. The difference between a descendant and a compound is the difference between styling every button in a card and styling a card that is itself a button, and it is the most common mistake when learning the syntax.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Is native nesting the same as a preprocessor?
Close, with a meaningful difference: the ampersand refers to the enclosing selector as a whole rather than performing text substitution. Nesting inside a selector list therefore produces a different result, usually the one you actually wanted.
How deep should nesting go?
Two levels is comfortable and three is usually the point to stop. Each level adds specificity that has to be beaten later, and nesting makes deep selectors easy to write without their cost being visible anywhere.
When do I need the ampersand?
Whenever the nested selector should compound with the parent rather than describe a descendant. Without it, a nested element selector targets descendants, which is a completely different rule.
Does nesting affect performance?
Not meaningfully. Selector matching is fast and the depth of nesting in source has no runtime cost beyond the resulting selector. The cost is in maintainability rather than speed.
Can I nest media queries?
Yes, and it is one of the clearest wins. Putting the media query inside the rule it modifies keeps the responsive behaviour next to the thing it changes rather than in a separate block at the foot of the file.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste nested or flat CSS to convert between the two and see the resulting selectors.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.