CSS Nesting (CSS Nesting Module Level 1) is native CSS syntax that allows nesting style rules inside other rules, similar to Sass/SCSS. It's supported natively in modern browsers since 2023, no preprocessor required.

How is CSS Nesting different from SCSS nesting?

CSS Nesting uses the '&' symbol to reference the parent selector, similar to SCSS. However, CSS Nesting has stricter syntax requirements — nested selectors (like classes and pseudo-classes) must start with '&' or use :is().

Which browsers support CSS Nesting?

CSS Nesting is natively supported in Chrome 120+, Firefox 117+, Safari 17.2+, and Edge 120+. For older browsers, you can use PostCSS with postcss-nesting plugin.

How do I support older browsers?

Use the 'Expand Nesting' function in this tool to convert nested CSS back to flat CSS, or set up PostCSS with the postcss-nesting plugin in your build pipeline.

Free Online CSS Nesting Generator

← Back to Tools

Updated: 2026-07-11

⚙️ Options

Compress output Preserve comments

Examples:

📥 Input CSS

Paste your CSS here

📤 Output

Converted CSS 0 lines

Click "To Nested" or "Expand to Flat" to see result

💡 About CSS Nesting

CSS Nesting is a native CSS feature (CSS Nesting Module Level 1) that lets you nest style rules within other rules. Use the & symbol to reference the parent selector. Example:

.card { background: #0f172a; & .title { font-size: 1.2rem; } &:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); } }
📌 Note: CSS Nesting requires nested selectors to start with &, ., #, :, [, >, +, or ~.

🪺 CSS Nesting Generator

⚙️ Options

📥 Input CSS

📤 Output

💡 About CSS Nesting