General Sibling (~) combinator (Internet Explorer)

General Sibling (~) combinator

Language Filter

General Sibling (~) combinator

[This documentation is preliminary and is subject to change.]

Specifies an adjacent sibling relationship between selector elements.

Syntax

first~second { ... }

Parameters

first: A CSS simple selector.
second: A CSS simple selector.

Standards information

Selectors Level 3, Section 6.3

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<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>

Build date: 3/14/2012