CSS Combinators

You already know how to target elements with type, class, and id selectors. Real pages need a next skill: style an element because of where it sits relative to another — inside a section, only as a direct child, or right after a heading.

What are CSS combinators?

A CSS combinator is a symbol (or a space) placed between two selectors. It tells the browser how those two parts of the selector must relate in the HTML tree. The left side is the reference; the right side is what actually receives the styles.

Four combinators at a glance

Learn the symbols first, then practice each one with a short example.

Descendant combinator (space)

A space between selectors means “match the second selector anywhere inside the first.” Depth does not matter — grandchild and deeper levels still match.

When descendants help

Use a descendant combinator for shared look inside a region: all paragraphs in an article, all links in a nav. If you only want direct children and nested matches are too wide, switch to the child combinator.

Child combinator (>)

The > combinator matches only direct children. A nested element deeper than one level does not match.

Space vs > in one picture

If HTML is <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul>, then .menu > li styles the outer li only. A descendant .menu li would style both the outer and the nested li.

Adjacent sibling combinator (+)

The + combinator matches the element that comes immediately after its sibling reference — same parent, next door, no other element between them.

A common pattern

Many layouts want the first paragraph after a heading to look slightly different (lead text). h2 + p targets that neighbor without giving every paragraph a special class.

General sibling combinator (~)

The ~ combinator matches every later sibling that fits the second selector — not only the immediate next one. They still must share the same parent.

+ vs ~

• h2 + p — only the paragraph that sits right after the h2
• h2 ~ p — every p that follows that h2 as a sibling (the first, second, third…)
  If a div sits between h2 and a p, h2 + p fails for that p, but h2 ~ p can still match later sibling paragraphs.

Choosing a combinator

• Prefer descendant for “everything of this kind inside this region”
• Prefer child when nesting would otherwise style nested lists, cards, or widgets you did not mean
• Prefer adjacent sibling for a one-step neighbor pattern (heading → first paragraph)
• Prefer general sibling when several peers after a marker should share a look
  Keep chains short while you learn. Long combinator chains are powerful — and easy to break when HTML structure changes.

Try it yourself

1. Build a small page with an <article> that contains an <h2>, a <p>, a <div> with another <p> inside, then one more <p> after the div.
2. Add article p { color: #334155; } and confirm both paragraphs inside the article change (descendant).
3. Change the rule to article > p { color: #0f766e; } and refresh — only direct child paragraphs should keep that color; the nested p inside the div should not.
4. Add h2 + p { font-weight: bold; } and confirm only the paragraph immediately after the heading becomes bold.
5. Optional: try h2 ~ p { max-width: 36rem; } and notice every sibling paragraph after the heading picks up the max-width.

Common mistakes

• Using a descendant when you meant a child — nested widgets suddenly inherit styles you only wanted on top-level items
• Expecting h2 + p to skip over another element between the heading and the paragraph — adjacent means immediate
• Reading the combinator backwards — styles apply to the right-hand selector, not the left-hand reference
• Putting a comma where you meant a combinator (h2, p groups selectors; it does not mean “p after h2”)
• Assuming ~ requires the elements to be next to each other — general sibling only requires “later sibling,” not “next door”

Summary

• Combinators join selectors by HTML relationship: inside, direct child, next sibling, or later siblings
• A space = descendant (any depth); > = direct child only
• + = immediate next sibling; ~ = any later sibling that matches
• Styles apply to the selector on the right of the combinator
• Pick the tightest combinator that still expresses your intent
• Practice by swapping space for > and comparing + with ~ on the same page