Thesubsequent-sibling combinator (~, a tilde) separates two selectors and matchesall instances of the second element that follow the first element (not necessarily immediately) and share the same parent element.

In the following example, the subsequent-sibling combinator (~) helps to select and style paragraphs that are both siblings of an image and appear after any image.

img ~ p {  color: red;}

Syntax

/* The white space around the ~ combinator is optional but recommended. */former_element ~ target_element { style properties }

Examples

Using the combinator with simple selectors

This example shows the use of the~ combinator when both the selectors are simple selectors (p andspan).

<article>  <span>This is not red because it appears before any paragraph.</span>  <p>Here is a paragraph.</p>  <code>Here is some code.</code>  <span>    This span is red because it appears after the paragraph, even though there    are other nodes in between.  </span>  <p>Whatever it may be, keep smiling.</p>  <h1>Dream big</h1>  <span>    Doesn't matter how many or what kind of nodes are in between, all spans from    the same parent after a paragraph are red.  </span></article><span>  This span is not red because it doesn't share a parent with a paragraph.</span>

p ~ span {  color: red;}

Using the combinator with complex selectors

This example contains twocomplex selectors, both using the subsequent-sibling combinator:.foo p ~ span and.foo p ~ .foo span.

• The first complex selector,.foo p ~ span, matches all spans that come after a paragraphif the span and paragraph share the same parentand that parent or an ancestor of that parent has the class.foo.
• The second complex selector,.foo p ~ .foo span, matches all spans that are a descendant of the element with class.fooif that element is a sibling of the previously mentioned paragraph.

The example below shows that the target element in the complex selector must share the same parent as the initial element in the complex selector.

<h1>Dream big</h1><span>And yet again this is a red span!</span><div>  <p>Here is another paragraph.</p>  <span>A blue span</span>  <div>    <span>A green span</span>  </div></div>

.foo p ~ span {  color: blue;}.foo p ~ .foo span {  color: green;}

In the above HTML, the two siblings of.foo p arespan and.foo. The greenspan is a descendant of the.foo class, which is a sibling ofp.

• When the target selector isspan, thespan element that is a sibling ofp is selected. Thep element is a descendant of.foo, so are itsspan siblings.
• In.foo p ~ .foo span, the target selector isspan that is a descendant of.foo. In this case, thespan element that's a descendant of.foo is selected if that.foo is a sibling ofp; essentially, both are nested in an ancestor of.foo.

Specifications

Browser compatibility

See also

• Next-sibling combinator