= CSS combinator
{c}
A <CSS combinator> specifies a structural relationship between parts of a <CSS selector>. A descendant space permits any depth, `>` requires an immediate child, `+` requires the next element sibling, and `~` permits a later element sibling. These operators determine which elements match; they contribute no <CSS specificity> of their own.<Selectors Level 4 by World Wide Web Consortium>[Combinators: descendant, child, next-sibling and subsequent-sibling combinators]{ref}
Consider `<section><h2>Title</h2><p>A</p><div><p>B</p></div><p>C</p></section>`. The selector `section p` matches all three paragraphs. `section > p` matches A and C, since B has the div as its immediate parent. `h2 + p` matches A, the next element sibling of the heading. `h2 ~ p` matches A and C, the paragraph siblings following that heading.
Whitespace text between tags does not count as an intervening element sibling for the `+` relation. Likewise, `~` stays within one parent; it does not search arbitrarily far through the document for any later paragraph. This makes the distinction between document order and sibling relationships concrete.
A change in a combinator can therefore change a rule's scope without changing its selector counts. `article p.warning` and `article > p.warning` have the same <CSS specificity> but can match different paragraphs. Debugging a style rule requires checking the relationship it requests as well as the priority of the declarations it contains.
Back to article page
