CSS3 Adjacent Selector
In CSS3 we have a lot of selectors which empower the dev's productivity and help in the optimization of DOM, and usage of classes.
One such selector is:
Adjacent Selectos ( + )
The adjacent selector in CSS is a selector that selects an element that is immediately adjacent (i.e., comes right after) to another element. The adjacent selector is represented by the plus sign (+) and is used to select the first element that immediately follows the specified element. Eg: here all p tags after H1 would get the style implemented but not the p which is coming after H2
<div>
<h1>About us</h1>
<p>CSS team is proud to present you...</p>
<h1>Profile</h1>
<p>CSS team is proud to present you...</p>
<h1>Team</h1>
<h2>Subheding...</h2>
<p>CSS team is proud to present you...</p>
</div>
div h1 + p {
color: red;
margin-top: 10px;
}
Use cases:
Whenever there is text after an image you want the margin between them.
Whenever there is a paragraph after an h2 you want a specific style but if there is an h3 between them you want a different style.
Happy Learning!!