CSS - Combinators

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10 minutes

Combinators relate elements to each other so you can target structures like children and siblings.

Learning Objectives

• Use descendant, child, adjacent sibling, and general sibling combinators.
• Know when to prefer child over descendant for performance and clarity.

Details & Examples

• Descendant: article p
• Child: ul > li
• Adjacent sibling: h2 + p
• General sibling: h2 ~ p

Common Pitfalls

• Overly broad descendant selectors can be slow and fragile; prefer child when possible.

Checks for Understanding

1. What selector matches the first paragraph after an h2?

Exercises

1. Convert a broad descendant selector to a child selector for clarity.
2. Use adjacent sibling to style only the first paragraph after an h2.