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;
}
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
- CSS 2.1, Section 5.7
Related specifications
- CSS Level 2 Specification
- W3C Recommendation
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]