Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

general sibling

< css‎ | selectors
Jump to: navigation, search

general sibling

This article is Ready to Use.

W3C Recommendation

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

CSS

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

Related specifications

Specification Status Related Changes
CSS Selectors Level 3 W3C Recommendation

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]