General Sibling (~) Combinator
Specifies a general sibling relationship between selector elements.

Syntax

HTMLE ~ F { sRules }
ScriptingN/A

Possible Values

EString that specifies the name of a document language element type or simple selector.
FString that specifies the name of a document language element type or simple selector.
sRulesString that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

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   Attribute selectors are enabled only in standards-compliant mode (strict !DOCTYPE).

Example

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
    <style>
        H1 ~ P:first-leter { 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>

Standards Information

This selector is defined in CSS, Level 3 (CSS 3).

See Also

Tags :


Community Content

Thomas Lee
Correcting Problems
Under the style tag, there is a typo:

"first-leter" should probably be "first-letter"

Page view tracker