A + B
Sibling combinators: `+` selects the element right after A, `~` selects all following siblings of A.
Syntax
A + B { … } A ~ B { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| A + B | next sibling | B that comes immediately after A with the same parent. |
| A ~ B | later siblings | Every B that comes after A with the same parent. |
Examples
The paragraph right after a heading:
<style>
h3 + p { font-weight: bold; }
</style>
<h3>Title</h3>
<p>The first paragraph after the title is bold.</p>
<p>The second one is not.</p>All paragraphs after the heading:
<style>
h3 ~ p { color: teal; }
</style>
<p>Before the title — not selected.</p>
<h3>Title</h3>
<p>After the title.</p>
<p>Also after the title.</p>Notes
Both combinators only look forward: there is no "previous sibling" combinator. To style an element based on what comes after it, use :has(), for example h3:has(+ p).
See also
In the tutorial
- Selectors — How to pick elements for styling — by tag, class, id, nesting and attribute.