Combinators: Descendant, Child, and Sibling

8 min read

Expressing Relationships Between Elements

Combinators let you select elements based on their position relative to other elements in the HTML tree. There are four main combinators.

css

/* Descendant (space) — any <a> inside .nav, no matter how deep */
.nav a {
  text-decoration: none;
}

/* Child (>) — direct children only */
ul > li {
  list-style: disc;
}

/* Adjacent sibling (+) — the <p> immediately after an <h2> */
h2 + p {
  margin-top: 0;
  font-size: 1.1rem;
  color: #555;
}

/* General sibling (~) — ALL <p> after an <h2> within the same parent */
h2 ~ p {
  padding-left: 1rem;
}

The descendant combinator is the most common but also the most permissive — it matches at any depth. Prefer the child combinator when you need to restrict the match to immediate children to avoid unexpected side effects.

Deep combinator chains like .page .section .card .header span are fragile. They break whenever the HTML structure changes. Keep selectors shallow.

Ready to test yourself?

Practice CSS— quiz & coding exercises