This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

adjacent sibling

Summary

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element.

An adjacent sibling combinator selects an element that appears directly after a specified sibling element. It is created by placing a plus sign (+) between two simple selectors. For example li + li will select a list item directly following another, sibling list item.

Examples

li + li {
  border-left: 1px solid #333;
}

View live example

Notes

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 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.

Syntax

first+second { ... }

Parameters

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

Standards information

Related specifications

CSS Level 2 Specification
W3C Recommendation

Attributions