Adjacent Sibling (+) combinator

Specifies an adjacent sibling relationship between selector elements.

Syntax

first+second { ... }

Parameters

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

Standards information

CSS 2.1, Section 5.7

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.

CSS selectors do not select text nodes. They target elements, which may or may not contain text.

Note Requires Windows Internet Explorer 7 or later.

Note Combinators are not supported in webpages that are displayed in IE5 (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 to the h2 that immediately follows an h1. The second h2 is not affected.

CSS


<!DOCTYPE html>
<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>