How Does Native CSS Nesting Syntax Work?
Learn how native CSS nesting works, when the & symbol is required, and how nested rules affect specificity and at-rules.
Expected Interview Answer
Native CSS nesting lets you write a selector inside another selector’s rule block, using the & symbol to reference the parent selector explicitly, so related styles for a component and its states or children can live together without a preprocessor like Sass.
Inside a parent rule block, a nested selector that starts with a type selector, class, ID, or combinator implicitly becomes a descendant of the parent, while & explicitly stands in for the parent selector itself, which is required when nesting pseudo-classes, pseudo-elements, or when combining directly onto the parent, such as &:hover or &.active. Nested at-rules like @media and @supports are also allowed directly inside a rule block, scoping a conditional block to that selector without repeating it. Under the hood, the browser desugars nested rules into flattened, fully qualified selectors, and the specificity of a nested rule is calculated as if it had been written unnested, so nesting is a purely syntactic convenience, not a specificity shortcut. Because nesting relies on the same cascade and specificity math as normal CSS, deeply nesting selectors can still create the same specificity problems as manually chained selectors.
- Groups a component and its states/children in one readable block
- Removes the need for a Sass/Less build step just for nesting
- Supports nested @media and @supports without selector repetition
- Compiles down to standard flattened selectors with predictable specificity
AI Mentor Explanation
CSS nesting is like writing a team’s rulebook where the team’s general rules are stated once, and specific rules for the captain or the wicketkeeper are written indented directly underneath, using "the captain" as shorthand instead of repeating the team name every time. If you write "& when batting first," that shorthand explicitly refers back to the team itself rather than a sub-role. When the rulebook is finally printed for umpires, every indented rule is expanded back into its full, unambiguous statement. That indent-then-expand mechanism is exactly how the browser desugars nested CSS selectors.
Step-by-Step Explanation
Step 1
Write the parent selector block
Start a normal rule, e.g. .card { ... }, as the outer scope.
Step 2
Nest descendant or & selectors inside
A bare selector nests as a descendant; & explicitly references the parent for states like &:hover.
Step 3
Nest at-rules if needed
@media or @supports blocks can be written directly inside the rule, scoped to that selector.
Step 4
Browser flattens to standard selectors
Nested rules desugar into fully qualified selectors with specificity computed as if written unnested.
What Interviewer Expects
- Correct distinction between implicit descendant nesting and explicit & nesting
- Knowing & is required for pseudo-classes/elements and compound selectors on the parent
- Awareness that nesting is purely syntactic and does not change specificity math
- Mentioning support for nested @media/@supports blocks
Common Mistakes
- Forgetting & when nesting a pseudo-class, producing an unintended descendant selector
- Assuming nesting lowers or changes specificity compared to writing it flat
- Confusing native CSS nesting syntax with Sass-specific nesting features like parent selector suffixing without &
- Over-nesting selectors, recreating the same specificity/maintainability problems nesting was meant to avoid
Best Answer (HR Friendly)
“Native CSS nesting lets me write a component’s states and children indented right inside its main style block, using & to mean 'this element,' instead of repeating the full selector every time or relying on a Sass build step. It just makes the CSS easier to read and keep organized.”
Code Example
.card {
padding: 16px;
border-radius: 8px;
/* & required: refers to .card itself */
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* bare selector: implicit descendant .card .title */
.title {
font-weight: 600;
}
/* nested at-rule scoped to .card */
@media (min-width: 768px) {
padding: 24px;
}
}Follow-up Questions
- When is & mandatory versus optional in nested CSS?
- How does nested CSS specificity compare to the same selector written flat?
- What is the difference between native CSS nesting and Sass nesting?
- How would you nest a media query only for a hover state on a component?
MCQ Practice
1. In native CSS nesting, when is the & symbol required?
& is required to attach a pseudo-class/element or compound directly to the parent selector rather than nest as a descendant.
2. How is the specificity of a nested CSS rule calculated?
Nesting is purely syntactic sugar; the browser computes specificity as if the selector were written flat.
3. What happens to a bare (non-&) selector nested inside a parent rule?
A bare nested selector is treated as a descendant combinator relative to the enclosing parent selector.
Flash Cards
What does & mean in nested CSS? — An explicit reference to the parent selector, required for &:hover-style compounding.
What does a bare nested selector become? — An implicit descendant selector of the parent.
Does nesting change specificity? — No — specificity is computed as if the selector were written unnested.
Can at-rules be nested? — Yes, @media and @supports can be nested directly inside a rule block.