In CSS3 we have a lot of selectors which empowers the devs productivity , helps in optimisation of DOM, and usage of classes.
One of 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 an text after an image you want the margin between them.
Whenever there is a paragraph after a h2 you want a specific style but is there is a h3 between them you want different style.
Happy Learning!!
Top comments (3)
I learnt something new, thanks!
Why is there a div arround the markup?
Why there shouldn’t be div around it?
It is not a section just an example. Hence, div