Adjacent sibling selectors

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Syntax

former_element + target_element { style properties }

Example

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Specifications

Browser compatibility

[1] Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

See also

• General sibling selectors