General Sibling (~) combinator

Specifies an adjacent sibling relationship between selector elements.

Selectors Level 3, Section 6.3

 

Syntax

first~second { ... }

Parameters

first

A CSS simple selector.

second

A CSS simple selector.

Standards information

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 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.
 

Examples

The following example applies the style rule to the first letter of each paragraph that follows an h1 but does not applies to other paragraphs preceding the h1.

CSS
Copy 

<!DOCTYPE html>
<html>

<head>
<style>
h1 ~ p:first-letter { 
  text-decoration:underline; color: red; 
}
</style>
</head>

<body>

<p>This paragraph is not affected by the style rule.</p>
<h1>Header One</h1>
<h2>Header Two</h2>
<p>Paragraph text with style rule applied.</p>
<div>
  Other text with no style applied</div>
<p>Paragraph text with style rule applied.</p>

</body>

</html>

 

 

Show: