DEV Community

Neha Sharma
Neha Sharma

Posted on

CSS3 Selectors Series - 1

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>
Enter fullscreen mode Exit fullscreen mode
div h1 + p {
 color: red;
  margin-top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Use cases:

  1. Whenever there is an text after an image you want the margin between them.

  2. 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)

Collapse
 
vulcanwm profile image
Medea

I learnt something new, thanks!

Collapse
 
kolja profile image
Kolja

Why is there a div arround the markup?

Collapse
 
hellonehha profile image
Neha Sharma

Why there shouldn’t be div around it?

It is not a section just an example. Hence, div