W3cubDocs

/CSS

Adjacent sibling combinator

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.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Syntax

former_element + target_element { style properties }

Examples

CSS

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

HTML

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

Result

Specifications

Specification
Selectors Level 4 # adjacent-sibling-combinators

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`Adjacent_sibling_combinator`	1	12	1	7 ["Before Internet Explorer 10, the combinator only works in standards mode.", "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."]	3.5	1	≤37	18	4	10.1	1	1.0