Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

Adjacent Sibling Selector (CSS selector)

Browser support full matrix
IE7+ FF1+ Saf1.3+ Op9.5+
Buggy Full Full Full
Spec
Version
CSS2

Example

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

h2+p {
  ⋮ declarations
}

Try it yourself!View all demos

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.

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.

Compatibility

IE5.5None
6.0None
7.0Buggy
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Buggy
9.5Full

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

If one of the simple selectors is missing, Internet Explorer 7 acts as if there were a universal selector in its place, instead of failing as it should.

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.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters