Combinators

Combinators describe relationships between elements.

.card p { }
.card > p { }
h2 + p { }
h2 ~ p { }

A space matches any descendant. > matches a direct child. + matches the next sibling. ~ matches later siblings with the same parent.

Use the narrowest relationship the component guarantees. .card p also reaches paragraphs inside a nested quote or another component. .card > p stops at direct children.

Sibling selectors are useful when spacing or emphasis depends on document order:

h2 + p {
  font-size: 1.125rem;
}

.field + .help {
  margin-block-start: 0.5rem;
}

The first rule matches only the paragraph immediately after an h2. The second adds spacing only when help text immediately follows a field. In both cases, HTML order defines the relationship.

Avoid long chains such as main .page section .card p strong. They bind styling to a fragile HTML shape and raise specificity. A clear component class is often easier to maintain.

Duplicate a card, then nest a second card inside it. Use DevTools to check which paragraphs match .card p and .card > p. The unexpected matches reveal whether your selector depends on more structure than you intended.