Sibling Selectors In CSS
Published: 2020-09-01 17:43:28

It's tough to imagine a website without CSS and nowadays JavaScript too. JavaScript gives more functionalities to the website. But if you are newbie, you have just started your webdev career and you have creative ideas but you don't have JavaScript knowledge to add some of those JavaScript functionalities to your design, so here I'm explaining you about one of those ideas like a toggle menu or sliding task bar menu or a carousel gallery or testimonials and all, which you have seen but never tried to design because of JavaScript.
So here I explain you about CSS Next and Previous (yes PREVIOUS) sibling element selector.
Let's first talk about Next Sibling Selectors:-
# + Next Sibling Selector
Using next sibling selector you can change the properties of the element that is directly after your another specific element or you can say using this you can change the properties of adjacent sibling element.
{% codepen https://codepen.io/ritvikbunny/pen/bGprZdy %}
As you can see in above snippet there is a **+** sign in between **h1** and **p** tag, here **p** is the adjacent sibling to **h1**. So now if you hover over h1 you can see change in properties of **p** tag.

# ~ General Next Sibling Selector
Using general next sibling selector you can select any or all of the succeeding sibling elements whereas using next sibling selector we can only select adjacent sibling element.
{% codepen https://codepen.io/ritvikbunny/pen/Yzqxgqv %}
As you can see in above snippet there is a **~** sign in between **h1** and **p** tag but there is also an another sibling **h2** tag in between but it won't affect and you can change properties of **p** tag although **p** is not next adjacent sibling of **h1**.
If you want then you can also change the properties of **h2** which is in between **h1** and **p**, along with change in properties of **p** tag.

So far we talked about next sibling selectors, but what about previous sibling selectors ?
Unfortunately in CSS we don't have any such previous sibling selectors, but yes in axe(ACSSSS)- Augmented Cascading Style Sheet Syntax, we have previous or preceding sibling selectors.

#### When using ACSSSS remember to add this library in your html file:-
```html
<script src="https://rouninmedia.github.io/axe/axe.js"></script>
```
# ? Immediate Previous Sibling Selector 
Using previous sibling selector we can change the properties of the element that is directly before your another specific element or you can say using this you can change the properties of immediate preceding element.
{% codepen https://codepen.io/ritvikbunny/pen/abNyRgJ %}
As you can see in above snippet there is a **?** sign in between **p** and **h1** tag, here **h1** is immediate preceding sibling to **p**. So now if you hover over **p** tag you can see changes in **h1** tag.

# ! General Previous Sibling Selector
Using general previous sibling selector you can select any or all of the previous or preceding sibling elements whereas using previous sibling selector we can only select immediate previous sibling element.
{% codepen https://codepen.io/ritvikbunny/pen/oNxeVNo %}
As you can see in above snippet there is a **!** sign in between **p** and **h1** tag, but there is also a another sibling **h2** tag in between but it won't affect and you can change properties of **h1** tag although **h1** is not immediate preceding sibling of **p** tag. 
If you want then you can also change the properties of **h2** which is in between **h1** and **p**, along with change in properties of **p** tag. This will be more clear by example below:-
{% codepen https://codepen.io/ritvikbunny/pen/KKzvLzr %}

#### For more designs related to this topic check my pens at [CodePen](https://codepen.io/ritvikbunny)
##### Thanks for reading this is my first article.
##### Any feedbacck would be greatly appreciated.
###### Connect with me on [Twitter](https://twitter.com/ritvikdubey27?s=09) or [LinkedIn](https://www.linkedin.com/in/ritvik-dubey-3bbb22169)