Intermediate LevelCSS & Modern Layouts
How does native CSS nesting work without preprocessors?
❓ Interview Prompt: Explain native CSS nesting syntax, the & selector, and differences from Sass nesting.
Native CSS nesting (supported since 2023) allows writing child selectors inside parent rule blocks, similar to Sass/SCSS but without a preprocessor:
Syntax:
Use & to reference the parent selector. For element selectors, the & is optional with the relaxed nesting spec.
Key Differences from Sass:
1
Native CSS nesting is processed at runtime by the browser, not compiled.
2
Element selectors may require
& prefix or :is() wrapping in older implementations.3
No Sass-specific features like
@extend, @mixin, or $variables (use CSS Custom Properties instead).Code Implementation Example
css
/* Native CSS Nesting */
.card {
background: white;
border-radius: 12px;
padding: 24px;
& .title {
font-size: 1.25rem;
font-weight: 700;
color: #3d2c2e;
}
& .body {
color: #886f68;
line-height: 1.6;
}
&:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
padding: 32px; /* Media queries can nest too */
}
}💡Native CSS nesting with child selectors, pseudo-classes, and media queries.
🎯 Interview Key Takeaway
Native CSS nesting eliminates the need for Sass/SCSS for basic nesting. Media queries can also be nested.
#Nesting#Native CSS#Modern#Intermediate
Back to all CSS & Modern Layouts Questions→