← Back to glossary

CSS Nesting (Native)

frontend Beginner

Also Known As

CSS nesting native CSS nesting CSS & CSS nested rules

TL;DR

Native CSS nesting lets you write nested selectors directly in CSS without a preprocessor — &:hover inside .card applies to .card:hover — available in all modern browsers since 2023 without any build step.

Explanation

CSS nesting was historically only available via Sass or Less preprocessors. The native CSS Nesting specification (now Baseline 2024) allows nesting rules inside other rules. The & selector refers to the parent rule's selector. Nesting combinators work: & + p means .parent + p. Media queries can nest: @media (max-width: 600px) inside a rule applies only to that rule's elements. Unlike Sass, native CSS nesting evaluates lazily by the browser — there is no compilation step. The specificity of nested rules is calculated at parse time as if they were flat. Browser support is now universal in Chrome 112+, Firefox 117+, Safari 17.2+ — covering all modern users.

Common Misconception

✗ CSS nesting requires a build tool like Sass. Native CSS nesting works directly in the browser — no Sass, PostCSS, or compilation needed. For projects already using Sass, you can migrate to native nesting gradually.

Why It Matters

CSS nesting reduces repetition and keeps related styles co-located without requiring Sass or a build step. For PHP applications that serve HTML directly, native CSS nesting means cleaner stylesheets without adding a preprocessor to the build pipeline.

Common Mistakes

Omitting & before element selectors — 'p { }' inside a rule is ambiguous (is it a nested rule or a bare element?); use '& p { }' for clarity and compatibility.
Using deep nesting (4+ levels) — native nesting inherits Sass's main pitfall: specificity explosion and hard-to-read stylesheets; limit to 2–3 levels.
Not checking browser support for older projects — CSS nesting requires Chrome 112+, Firefox 117+, Safari 17.2+; for IE or very old browser support, stick with Sass.
Mixing native nesting with PostCSS nesting plugin — they have subtle differences; choose one approach per project.

Code Examples

✗ Vulnerable

/* ❌ Repetitive flat CSS — no nesting */
.card { background: white; border-radius: 8px; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.card .title { font-size: 1.2rem; font-weight: 600; }
.card .title:hover { color: royalblue; }
.card .body { padding: 16px; color: #555; }
.card .body p { margin-bottom: 8px; }

/* Styles are scattered — hard to see the .card structure */

✓ Fixed

/* ✅ Native CSS nesting — co-located, no build step */
.card {
    background: white;
    border-radius: 8px;

    &:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }

    & .title {
        font-size: 1.2rem;
        font-weight: 600;

        &:hover { color: royalblue; }
    }

    & .body {
        padding: 16px;
        color: #555;

        & p { margin-bottom: 8px; }
    }

    /* Nested media query */
    @media (max-width: 600px) {
        padding: 12px;
    }
}

CSS Nesting (Native)

Also Known As

TL;DR

Explanation

Common Misconception

Why It Matters

Common Mistakes

Code Examples

References

Tags

CSS Nesting (Native)

Also Known As

TL;DR

Explanation

Common Misconception

Why It Matters

Common Mistakes

Code Examples

References

Tags

Related Terms