Detailed explanation
The adjacent sibling combinator (+) and general sibling combinator (~), also called the subsequent-sibling combinator, select elements based on their position relative to another element under the same parent. In A + B, B matches only when its immediately preceding element sibling matches A. In A ~ B, B matches when any preceding element sibling matches A. Both relationships are directional: the right-hand selector targets a following sibling, not an earlier sibling or a descendant. This makes them useful for styling relationships in document structure without adding extra classes to every target element.
For example, h2 + p { font-weight: bold; } makes a paragraph bold when it immediately follows an h2. With h2 ~ p { color: gray; }, every paragraph that follows an h2 under the same parent becomes gray, even if other elements appear between them. Consider a section containing, in order, an h2, a paragraph, a div, and another paragraph. The first paragraph matches both selectors; the second matches only h2 ~ p. A paragraph nested inside that div matches neither because it does not share the h2’s parent. A paragraph before the heading also matches neither unless another earlier h2 qualifies it.
The browser evaluates these relationships using the document’s element tree, not the visual arrangement on screen. Whitespace text nodes and HTML comments do not break adjacency, but an intervening element does. Rearranging items with Flexbox order or Grid placement does not change which sibling selectors match. The combinators themselves add no specificity: h2 + p and h2 ~ p both have specificity 0-0-2 because each contains two type selectors. If both rules match a paragraph, their different properties apply together; competing declarations follow the normal cascade.
In interviews, the important distinction is not simply “one versus many.” A + selector can match several elements across a document, provided each target has the required immediate predecessor. Use + for tightly coupled pairs, such as a label immediately after an input, and ~ for styling later siblings, such as feedback after a checkbox. Interviewers typically look for correct reasoning about shared parents, direction, intervening elements, and repeated matches.
Key points to remember
- A + B selects B only when A is its immediately preceding element sibling.
- A ~ B selects B when at least one earlier element sibling matches A.
- Both combinators require a shared parent and target following siblings.
- Comments and whitespace do not break adjacency; intervening elements do.
- Combinators add no specificity and use document order, not visual order.
Common mistakes candidates make
- Saying + matches only one element in the entire document rather than every qualifying adjacent sibling.
- Assuming ~ also selects preceding siblings or descendants of following siblings.
- Thinking whitespace breaks + adjacency or that Flexbox order changes selector matching.
Likely follow-up questions
Does a new heading stop h2 ~ p from matching later paragraphs?
No; ~ has no built-in stopping condition at another heading. A later paragraph still matches if it shares a parent with an earlier h2.
What happens when both h2 + p and h2 ~ p match the same paragraph?
Both rules participate in the cascade, so bold text and gray colour can apply together. If they set conflicting values for the same property, normal cascade rules decide; with otherwise equal priority, the later declaration wins.
Can sibling relationships be used to style an earlier element?
Neither + nor ~ directly selects the earlier element. However, h2:has(+ p) selects an h2 whose immediately following element sibling is a paragraph, using :has() to test that relationship.
Interview tip: Explain the shared-parent and following-sibling requirements first, then demonstrate both selectors with an intervening element.