Combinators (descendant, child, sibling)

Combinators show the relationship between selectors. The descendant combinator selects all matches; child selects direct children; sibling combinators select adjacent or general siblings.

Combinator Types

Combinator	Symbol	Meaning	Example
Descendant	(space)	Any nesting level	div p
Child		Direct children	div > p
Adjacent sibling	+	Next sibling	h1 + p
General sibling	~	Any later sibling	h1 ~ p

CSS

/* Descendant combinator (space) */
div p {
  color: red;
  /* All p inside div, any depth */
}

/* Child combinator (>) */
div > p {
  color: blue;
  /* Only direct p children of div */
}

/* Adjacent sibling (+) */
h1 + p {
  margin-top: 0;
  /* First p after h1 */
}

/* General sibling (~) */
h1 ~ p {
  color: gray;
  /* All p after h1 */
}

Practical Examples

CSS

/* Remove margin on first paragraph after heading */
h2 + p {
  margin-top: 0;
}

/* Style list items inside navigation */
nav ul li {
  display: inline-block;
}

/* Only style direct children of menu */
.menu > li {
  padding: 10px;
}

/* Style paragraphs that follow images */
img + p {
  margin-top: 10px;
}

Note

Combinators show element relationships. Space (descendant) selects any nesting. > (child) selects direct children. + and ~ select siblings. Powerful for precise targeting.

Grouping selectors: [Grouping Selectors](/css/grouping-selectors).