Upgrade your Internet Experience
Microsoft.com
Welcome Sign in
Internet Explorer Developer Center
Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
HTML and CSS
CSS Reference
Selectors
Combinators
 Adjacent Sibling (+) Combinator

  Switch on low bandwidth view
Adjacent Sibling (+) Combinator
Specifies an adjacent 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 adjacent sibling combinator is a "plus sign" (+) character that separates two simple selectors. Whitespace is not significant.

A selector of the form "E+F" matches element F when it immediately 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 and E must immediately precede F. 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 enabled only in standards-compliant mode (strict !DOCTYPE).

Example

The following example applies to the H2 that immediately follows an H1. The second H2 is not affected.

<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
    <style>
        H1 + H2 { text-indent:5px; color:red;}   
    </style>
</head>
<body>
    <h1>First Header</h1>
    <h2>Second Header</h2>
    <h2>Third Header</h2>
</body>
</html>

Standards Information

This selector is defined in CSS, Level 2 Revision 1 (CSS2.1).

See Also

Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
CSS selectors select elements, never text      John Sudds   |   Edit   |   Show History

It's important to note that CSS selectors never select text nodes; rather, they target elements, which themselves may or may not contain text. It is impossible to select and style text that follows an element, unless that text itself is contained within an element.

For example, if a DL contained spurious text outside of a DT or DD element, you can only style it by creating a rule for the DL, and undoing that rule for the child elements, DT and DD. (Note: Internet Explorer does not display child textnodes of a DL.)

Tags What's this?: css (x) Add a tag
Flag as ContentBug
© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker