Combinators
Combinators describe relationships between elements. A descendant selector uses whitespace, a child combinator uses >, an adjacent sibling uses +, and a general sibling uses ~.
Understanding relationships is important because overly broad descendant selectors can create unexpected styling and make CSS harder to maintain.
CSS Combinators
Combinators
.card p {
margin-block: 0.5rem;
}
.card > header {
padding: 1rem;
}
h2 + p {
margin-top: 0;
}
h2 ~ p {
color: #64748b;
}💡 Each combinator expresses a different structural relationship.
Key Takeaways
- Whitespace means descendant.
>means direct child.+means immediately following sibling.~means later sibling.
Knowledge Check
What does `.card > p` select?