general sibling

Summary

A general sibling combinator selects instances of an element appearing anywhere after another element within the same parent.

A general sibling combinator selects instances of an element appearing anywhere after another sibling element. It’s created by placing a tilde (~) between two simple selectors. For example p ~ span will select every span following a paragraph as long as they are found within the same parent element. Unlike the adjacent sibling combinator, the selected element can appear anywhere after the first element as long as they share the same parent element.

Examples

p ~ span {
    color: red;
}

View live example

Notes

Remarks

The general sibling combinator is a “tilde” (~) character that separates two simple selectors. Whitespace is not significant. A selector of the form “E~F” matches element F when it follows sibling element E in the document tree, ignoring non-element nodes (such as text nodes and comments). Element E and F must share the same parent but E does not necessarily precede F directly. To match the first child of the parent, use the :first-child pseudo-class. Note Requires Windows Internet Explorer 7 or later. Note Combinators are not supported in webpages that are displayed in the Microsoft Internet Explorer 5 document mode (also known as “Quirks” mode). To use attribute selectors, add a !DOCTYPE directive that specifies a standards-based document. For more information, see Defining Document Compatibility.

Syntax

first~second { ... }

Parameters

first

A CSS simple selector.
second

A CSS simple selector.

Standards information

• Selectors Level 3, Section 6.3

Related specifications

CSS Selectors Level 3

W3C Recommendation

Attributions

• Mozilla Developer Network : Article

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]