Sibling Combinators

Sibling combinators select elements based on their relationship to other elements at the same level.

Adjacent Sibling (+)

The + combinator selects the element immediately following another:

h2 + p selects paragraphs that come directly after an h2.

General Sibling (~)

The ~ combinator selects all following siblings:

h2 ~ p selects ALL paragraphs that follow h2 (not just adjacent).

Practical: Form Styling

Styling Lists with Siblings

Exercise: Style Adjacent Paragraph

Style the paragraph that immediately follows the heading: