A ~ B
The ~ sign selects every B element that comes anywhere after element A and shares the same parent.
Example
#.hint {
display: none;
}
.field input:focus ~ .hint {
display: block;
}<style>
.field { display: grid; gap: 6px; }
.field input { padding: 8px 10px; border: 1px solid #52525b; border-radius: 8px; background: #18181b; color: inherit; font: inherit; }
.field small { color: #71717a; }
.field .hint { margin: 0; color: #c4b5fd; font-size: 14px; }
</style>
<div class="field stage">
<label for="nick">Player name</label>
<input id="nick" placeholder="Click the field">
<small>Visible to other players</small>
<p class="hint">3 to 20 characters, no spaces.</p>
</div>Click the field. The hint sits two elements further along, and ~ still finds it. The + combinator wouldn’t work here.
Definition and usage
#The subsequent-sibling combinator, also called the general sibling combinator, is a looser version of +. The notation h2 ~ p selects every paragraph that comes after an h2 heading at the same level, even if other elements sit between them.
Just like with +, only elements after A count, never before it, and only ones that share the same parent. An element in a different container doesn’t match, even if it sits lower in the code.
The combinator comes in handy in interfaces driven by a form field’s state: a field at the start of a container can change the look of elements further along within the same parent, for example input:focus ~ .hint. These days, similar effects are often easier to write with :has(), which doesn’t depend on the order of elements.
Syntax
#A ~ B { property: value; }Example selectors
#- Every
spanafter.start, including the 5 that comes after theemelement. The 1 drops out, because it sits before.start. - All of
.start’s subsequent siblings, regardless of element type. - Every
spanthat has anotherspansomewhere before it. All of them match except the first.
Example selectors in practice
#.start ~ span
span after .start, including the 5 that comes after the em element. The 1 drops out, because it sits before .start..start ~ span { background: #7c3aed; color: #fff; }.start ~ *
.start’s subsequent siblings, regardless of element type..start ~ * { background: #7c3aed; color: #fff; }span ~ span
span that has another span somewhere before it. All of them match except the first.span ~ span { background: #7c3aed; color: #fff; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The combinator doesn’t see elements before A or in other containers. If something isn’t working, check in dev tools whether both elements share the same parent.
- The trick with a hidden checkbox and
~lets you build a menu with no JavaScript, but for menus and accordions the<details>element or a button witharia-expandedis a better choice, since screen readers understand them. :has()frees you from the ordering:.field:has(input:focus) .hintshows the hint no matter where it sits in the container.
Related entries
#- A + BThe + sign selects element B that sits directly after element A and shares the same parent.
- A > BThe > sign selects B elements that are direct children of element A, meaning they sit exactly one level below it.
- A BA space between selectors selects B elements anywhere inside element A, at any depth.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
- :focusMatches the element that has focus, meaning it currently receives keyboard input, such as a clicked form field.
- :checkedMatches a checked checkbox, a selected radio button, and a selected option in a select list.
Spotted a mistake or missing an example? Write to us.