DEV Community

Cover image for Sibling Selectors In CSS
Ritvik Dubey
Ritvik Dubey

Posted on • Updated on

Sibling Selectors In CSS

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.

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.

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

<script src="https://rouninmedia.github.io/axe/axe.js"></script>
Enter fullscreen mode Exit fullscreen mode

? 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.

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.

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

For more designs related to this topic check my pens at CodePen

Thanks for reading this is my first article.
Any feedbacck would be greatly appreciated.
Connect with me on Twitter or LinkedIn

Top comments (5)

Collapse
 
rdebeasi profile image
Ryan DeBeasi

I missed this part when I first skimmed this article:

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.

Just to reiterate: ? and ! selectors are not part of the CSS standard. They're provided by the axe library, which adds support for nonstandard selectors in CSS. Other tools (document.querySelector, jQuery, etc.) do not support these nonstandard selectors.

Just wanted to share that for anyone else who might've skimmed the article like I did. πŸ˜… Thank you for writing this helpful overview!!

Collapse
 
thisismanaswini profile image
Manaswini

Wow! I learnt something new. Thanks for writing thisπŸ™Œ

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank you so much MSπŸ˜‡

Collapse
 
ljcdev profile image
ljc-dev

Realle neat, no wonder why u were asking about previous sibling selectors. I learnt sth too 😁!

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Thank You JC😁 Yes finally I found the solution, so thought everyone should know about this..!