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 | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'next-sibling combinator' in that specification. |
Working Draft | Renames it the "next-sibling" combinator. |
Selectors Level 3 The definition of 'Adjacent sibling combinator' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'Adjacent sibling selectors' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
BCD tables only load in the browser