{
    "slug": "css_nesting",
    "term": "CSS Nesting (Native)",
    "category": "frontend",
    "difficulty": "beginner",
    "short": "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.",
    "long": "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.",
    "aliases": [
        "CSS nesting",
        "native CSS nesting",
        "CSS &",
        "CSS nested rules"
    ],
    "tags": [
        "css",
        "frontend",
        "nesting",
        "sass-alternative",
        "modern-css"
    ],
    "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."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_cascade",
        "css_specificity",
        "css_custom_properties",
        "css_cascade_layers"
    ],
    "prerequisites": [],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting",
        "https://caniuse.com/css-nesting"
    ],
    "bad_code": "/* ❌ Repetitive flat CSS — no nesting */\n.card { background: white; border-radius: 8px; }\n.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }\n.card .title { font-size: 1.2rem; font-weight: 600; }\n.card .title:hover { color: royalblue; }\n.card .body { padding: 16px; color: #555; }\n.card .body p { margin-bottom: 8px; }\n\n/* Styles are scattered — hard to see the .card structure */",
    "good_code": "/* ✅ Native CSS nesting — co-located, no build step */\n.card {\n    background: white;\n    border-radius: 8px;\n\n    &:hover {\n        box-shadow: 0 4px 12px rgba(0,0,0,.1);\n    }\n\n    & .title {\n        font-size: 1.2rem;\n        font-weight: 600;\n\n        &:hover { color: royalblue; }\n    }\n\n    & .body {\n        padding: 16px;\n        color: #555;\n\n        & p { margin-bottom: 8px; }\n    }\n\n    /* Nested media query */\n    @media (max-width: 600px) {\n        padding: 12px;\n    }\n}",
    "quick_fix": "Replace Sass-style .parent { .child { ... } } with native CSS .parent { & .child { ... } } — the & is required in native CSS when nesting element selectors to avoid ambiguity.",
    "effort": "low",
    "created": "2026-03-23",
    "updated": "2026-03-23",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_nesting",
        "html_url": "https://codeclaritylab.com/glossary/css_nesting",
        "json_url": "https://codeclaritylab.com/glossary/css_nesting.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[CSS Nesting (Native)](https://codeclaritylab.com/glossary/css_nesting) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_nesting"
            }
        }
    }
}