In CSS, what does the selector `.stack > * + *` match, and why is it used to space a list of children?

## Decoding the selector `.stack > * + *` looks cryptic but is three ordinary pieces: - `*` — the universal selector, which matches an element of any type. - `+` — the next-sibling combinator: the matched element must be immediately preceded by an element sibling under the same parent. - `>` — the child combinator: the match must be a direct child of `.stack`. As always, the rightmost compound is what gets styled. So this rule styles *elements* that (a) are direct children of `.stack` and (b) have an element immediately before them. Only the first child of any parent lacks a preceding element sibling, so the match set is precisely "all children except the first". ```css .stack > * + * { margin-block-start: 1rem; } ``` ## Why "all but the first" is the useful set Spacing a vertical list of items is a between-items problem. If you put `margin-bottom` on every child you get an unwanted gap under the last one; if you put `margin-top` on every child you get an unwanted gap above the first. Both are then patched with an override for the offending edge child, which is an extra rule that has to stay in sync. Defining the space only where two items meet removes the special case entirely. Nothing needs to know how many children there are, which one is last, or what type each one is. Adding a component to the middle of the stack inherits the spacing automatically, and conditionally rendering the first item does not leave a phantom gap behind. ## Why the universal selector, specifically Using `*` rather than a type or class means the rule does not care what the children are: ```html <div class="stack"> <h2>Heading</h2> <p>Paragraph</p> <my-widget></my-widget> </div> ``` All three get consistent spacing from one declaration. The `>` matters just as much: without it, `.stack * + *` would reach into the *insides* of every child and space their internal elements too, which is almost never what you want. Restricting to direct children keeps the rule's blast radius to one level. ## What `+` counts as a sibling The next-sibling combinator considers only *element* siblings. Text nodes and comments between two elements are ignored, so whitespace and formatting in the HTML source never break the match. But a real element in between does count as a sibling and shifts what "immediately preceded" means — which is exactly what makes the pattern robust: whatever the previous element is, the current one is still spaced from it. There is one consequence worth naming: an element that is visually hidden but still in the flow of the DOM is still an element sibling, so it still participates. If a child is conditionally rendered as an empty wrapper rather than removed, the spacing chain sees it. ## Relationship to gap On a flex or grid container, the `gap` property expresses the same intent more directly and does not touch margins at all. Where the container is not a flex or grid container — plain block flow, prose, arbitrary content — the owl remains a clean way to express between-items spacing, and it is common to see both approaches in one codebase. The important thing in an interview is being able to *read* the selector and explain why the match set is "all but the first", not to argue that one spacing technique is universally correct. ## Variations you may be shown `* + *` with no ancestor scoping applies to every element on the page that has a preceding sibling — a global reset-flavoured version that is far more invasive and usually a mistake in a shared codebase. `.stack > :not(:first-child)` expresses a similar idea through a pseudo-class instead of a combinator. And swapping `+` for `~` breaks the pattern: `~` would match every following sibling relative to *each* earlier sibling, which is a different, much larger match set and not what the spacing rule wants. ## Reading it under pressure If an interviewer writes `.stack > * + *` on a whiteboard, narrate it: "any element, that immediately follows an element sibling, that is a direct child of `.stack` — so every child but the first." That sentence is the whole answer.