Adjacent Sibling Selector (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.5+ CH2+
Full Full Buggy Full Full

Syntax

E+F {
declaration block
}

Description

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following,” so there can be no elements between the sibling elements. The combinator in an adjacent sibling selector is a plus character (+), as shown in this example:

h2+p {
  ⋮ declarations
}

Applying the above selector to this block of HTML may make things clearer:

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above does not match this paragraph.</p>

The first paragraph matches the adjacent sibling selector h2+p, because the p element is an adjacent sibling to the h2 element. The second paragraph doesn’t match the selector. Although it’s a sibling of the h2 element, it’s not adjacent to that element.

If we apply the above selector to the following HTML block, the paragraph isn’t matched—it’s not a sibling to the heading, since they don’t have the same parent:

<h2>Heading</h2>
<div>
  <p>The selector above does not match this paragraph.</p>
</div>

If we apply the selector to the HTML block below, the paragraph is matched by the selector even though it appears not to be adjacent to the heading:

<h2>Heading</h2>
Lorem ipsum dolor sit amet.
<p>The selector above matches this paragraph.</p>

The selector matches the paragraph in this case because the node between them is a text node rather than an element node. So if you look at element nodes only, the heading and the paragraph are adjacent siblings.

Tip: Element Nodes and Text Nodes

A browser builds an internal document structure, called the Document Object Model (DOM), from a web page. This model consists of nodes of different types. The relationship between the nodes can be visualized as an upside-down tree, which is why the model is often referred to as the DOM tree.

The two main types of nodes in this tree are element nodes and text nodes. Element nodes correspond to HTML elements, while text nodes correspond to the textual contents of element nodes. For instance, a fragment like <em>Important!</em> will create one element node for the em element, and that element node will contain a text node with the text Important!.

See CSS Layout and Formatting for more information about the DOM.

Example

This selector matches all p elements that appear immediately after h2 elements:

h2+p {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None Buggy Full Full Full Full Full Full Buggy Buggy Buggy Buggy Buggy Full Full Full

In Internet Explorer 7, this selector fails if a comment appears between the combinator and the simple selector that follows it.

In Internet Explorer 6 and 7, this selector will also select some inappropriate SGML elements such as the doctype declaration and comments.

In Opera 9.2, this selector will also match any recognized processing instructions.

Safari (up to and including version 4) and Chrome (up to and including version 3) behave “buggily” when the adjacent selector is preceded by an element using the :hover pseudo class. The bug varies between versions but the rule is either not applied at all, or applied inconsistently. The following snippet is not applied at all:
p:hover + p + p{background:red}

User-contributed notes

ID:
#2
Contributed:
by brothercake
Date:
Sat, 16 Apr 2011 21:06:49 GMT

Google Chrome appears to treat the adjacent sibling selector as though it were the general sibling selector, if the element either side of it is the same.

"h1 + p" works as expected, but "h1 > p + p" is treated as though it were "h1 > p ~ p"; or just "p + p" is treated as though it were "p ~ p".

I tried a few others, like "li + li" and "abbr + abbr", and they both behaved in the same errant way, so I've tentatively concluded that it's only when the element either side is the same.

ID:
#1
Contributed:
by andrin
Date:
Wed, 30 Mar 2011 09:30:05 GMT

This selector is broken in Google Chrome 10, http://code.google.com/p/chromium/issues/detail?id=75394.

See http://www.quirksmode.org/css/selector_adjacent.html for demo.

Related Products