CSS References

CSS Combinators Reference

A combinator is the character between two selectors that describes the relationship the elements must have to each other. CSS has four: the descendant combinator (a space), the child combinator (>), the adjacent sibling combinator (+) and the general sibling combinator (~). This reference explains each with examples, then gives you a runnable demo you can edit.

The four combinators at a glance

Combinator	Symbol	Example	Matches
Descendant	(space)	div p	Every <p> nested anywhere inside a <div>.
Child	>	div > p	Only <p> that are direct children of a <div>.
Adjacent sibling	+	h2 + p	The single <p> immediately after an <h2>.
General sibling	~	h2 ~ p	All <p> siblings that come after an <h2>.

Descendant combinator (space)

The most common combinator. It matches an element that is nested at any depth inside another. Written as two selectors separated by whitespace.

article a {          /* any link anywhere inside an article */
  color: teal;
}

Child combinator (>)

Matches only direct children — one level down, no deeper. Use it when you want to style immediate children without affecting more deeply nested elements.

nav > ul > li {      /* only top-level menu items */
  display: inline-block;
}

Adjacent sibling combinator (+)

Matches the element that comes immediately after another, sharing the same parent. Great for spacing rules like giving a paragraph extra top margin when it follows a heading.

h2 + p {             /* first paragraph after each h2 */
  margin-top: 0;
  font-weight: bold;
}

General sibling combinator (~)

Matches all siblings that come after the first element, not just the very next one. They must share the same parent.

h2 ~ p {             /* every paragraph after an h2 */
  color: #555;
}

Runnable demo

Edit the code below and press Run to see each combinator select different elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .box p { color: teal; }            /* descendant: all p in .box */
  .box > p { font-weight: bold; }    /* child: only direct p */
  h3 + p { background: #fef3c7; }     /* adjacent: p right after h3 */
  h3 ~ p { border-left: 3px solid #0f766e; padding-left: 8px; }
</style>
</head>
<body>
  <div class="box">
    <h3>Heading</h3>
    <p>Adjacent + general sibling paragraph.</p>
    <p>General sibling only.</p>
    <blockquote><p>Descendant but not a direct child.</p></blockquote>
  </div>
</body>
</html>

ℹ️

Sibling combinators can only look forward in the document. There is no combinator that selects a previous sibling — use :has() on the parent for backward relationships.