Codectionary / Developer documentation / CSS

Combinators

Combinators define relationships between selectors. The descendant combinator (space) matches any nested element. The child combinator (>) matches only direct children. The adjacent sibling combinator (+) matches the very next sibling. The general sibling combinator (~) matches all following siblings.

Syntax

A B { }   /* descendant */
A > B { } /* direct child */
A + B { } /* adjacent sibling */
A ~ B { } /* general sibling */

Examples

Descendant vs Child Combinator

The key difference between space and >.

.card p { color: gray; }     /* ANY <p> nested anywhere inside .card, at any depth */
.card > p { color: #b45309; }   /* ONLY <p> elements that are DIRECT children of .card */
  1. Both paragraphs are descendants of .card.
  2. Only the first paragraph is a direct child and matches the child combinator.
  3. Give the two selector rules different colours to compare which paragraphs match.
HTML used by this example
<article class="card"><p>Direct child paragraph</p><section><p>Nested descendant paragraph</p></section></article>

Sibling Combinators

Targeting elements based on their position relative to a sibling.

h2 + p { margin-top: 0; }      /* only the <p> immediately following an <h2> */
input:checked ~ label { color: green; } /* every label after a checked input, at any distance */
  1. The adjacent-sibling selector targets the paragraph immediately after h2.
  2. The checked input and later label share a parent, satisfying the general-sibling relationship.
  3. Toggle the checkbox to see the label colour change.
HTML used by this example
<h2>Sibling relationships</h2><p>Immediately after the heading.</p><p>Another paragraph.</p><div><input id="agree" type="checkbox"><label for="agree">Toggle this checkbox to change the following label.</label></div>

Parameters and values

  • (space) (descendant combinator): Matches elements nested anywhere inside, at any depth
  • > (child combinator): Matches only direct (one-level) children
  • + (adjacent sibling): Matches only the immediately following sibling
  • ~ (general sibling): Matches all following siblings, not just the next one

Best practices

  • Use the child combinator (>) when you specifically want to avoid styling deeply nested elements that happen to share a selector
  • Use the adjacent sibling combinator (+) for spacing adjustments, like removing top margin from an element right after a heading
  • The ~ general sibling combinator combined with :checked is a classic CSS-only trick for building interactive components without JavaScript
  • Avoid overly long combinator chains (like .a .b > .c + .d) - they become fragile and hard to maintain as markup changes

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading