Combinators - adjacent sibling Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Combinators: adjacent sibling Selectors</title>
<style>
/* adjacent sibling selector */
div + p {
background-color: grey;
}
</style>
</head>
<body>
<!--
adjacent sibling selector: Example: div + p
Selects first <p> element that are placed immediately after <div> elements
-->
<h1>Demo: Combinators - adjacent sibling selectors</h1>
<p>para1 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<div>
<p>para2 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<p>para3 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<section>
<p>para4 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
</section>
</div>
<p>para5 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<p>para6 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<div>
<p>para7 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<p>para8 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
</div>
<p>para9 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<p>para10 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
<p>para11 :Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, necessitatibus.</p>
</body>
</html>