CSS3 Selectors Series - 1

#css #css3 #webdev #programming

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!!

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.