CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS + Adjacent sibling selector

Adjacent sibling selector (+) Between two selectors, when the second element immediately follows the first element, and both elements are children of the same parent element, the second element will be selected.

Complete CSS selector reference manual

Online Example

Select all <p> elements that immediately follow the first <div> element and the first <span> element:

Example

<!DOCTYPE html>
<html>
<title>Basic Tutorial Website (oldtoolbag.com)</title>
<head>
<style>
div+p
{
background-color:red;
color:white;
}
div+span　{
　　background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Welcome to Basic Tutorial Website (www.oldtoolbag.com)</h1>
<div>
<p>The URL of our website is: www.oldtoolbag.com.</p>
<p>The name of our website is: Basic Tutorial Website.</p>
<span>Demonstrate adjacent sibling selector</span>
<span>Demonstrate adjacent sibling selector</span>
</div>
<p>Our website provides various basic tutorials for you to learn. Learn the basics well, and you can go further! </p>
</body>
</html>

Test and see ‹/›

Definition and usage

former_element　+　target_element　{　style　properties　}

element+element　 Adjacent sibling selectors are used to select the element immediately following the specified first element (not internal).

Browser compatibility

IEFirefoxOperaChromeSafari

All major browsers support element+element Adjacent sibling selector.

Note: 　element+elementIE8Must be declared when running in 　<!DOCTYPE>Complete CSS selector reference manual

CSS Functions (Functions)Comprehensive Manual of CSS Selectors