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
.
css
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
Syntax
css
former_element + target_element { style properties }
Examples
CSS
css
li:first-of-type + li {
color: red;
}
HTML
html
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
Result
Specifications
Specification |
---|
Selectors Level 4 # adjacent-sibling-combinators |
Browser compatibility
BCD tables only load in the browser