Sibling combinator in css
There may be some confusion as what we are calling sibling. So, let's first get that out of the way. See the below code:
<!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">
<title>sibling combinator</title>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>Lorem ipsum text</p>
<h2>2nd Heading</h2>
<p>Lorem ipsum text</p>
<p>Lorem ipsum text</p>
</div>
</body>
</html>
In the above code:
There are 2 types of sibling combinators:
Recommended by LinkedIn
Let's first understand the Adjacent sibling combinator.
Here's what MDN has to say: 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.
Let's code it out to understand better.
Example 1:
<!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">
<title>sibling combinator</title>
<style>
h2 + p{
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>1st para</p>
<h2>2nd Heading</h2>
<p>2nd para/p>
<p>3rd para</p>
</div>
</body>
</html>