Native CSS nesting and the parent selector

WHAT THIS TESTS: This checks practical familiarity with the native nesting module and the subtle difference between the native parent selector and Sass-style string concatenation.

A GOOD ANSWER COVERS: You write a child rule inside the curly braces of a parent rule. A nested selector that starts with a combinator or a type, class, or id is treated as a descendant of the parent, so .card { .title { } } targets .card .title. The ampersand explicitly stands for the parent selector. You need it whenever the nested selector must attach directly to the parent, such as &:hover, &.is-active, or & + & for adjacent siblings, because without & those would become descendants. The ampersand can also appear multiple times and is resolved at the same specificity as :is() containing the parent.

COMMON WRONG ANSWERS: Assuming native & concatenates text like Sass, allowing &__title to produce card__title; native nesting cannot do that because & is a real selector reference, not string interpolation. Forgetting that a bare element type at the start of a nested rule is allowed in modern syntax but historically required & or a wrapper. Thinking nesting changes specificity to be lower than the underlying selectors.

LIKELY FOLLOW-UPS: How does specificity work for nested rules and the :is()-like behavior of &. Can you nest media queries and at-rules. What are the browser support and tooling fallbacks compared to a preprocessor.

ONE CONCRETE EXAMPLE: Write .button { color: white; &:hover { color: yellow; } .icon { margin-inline-end: 4px; } }. The &:hover binds the hover state to the button itself, while .icon nests as a descendant, giving you .button .icon without repeating the parent name.