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>
? 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:-
Top comments (5)
I missed this part when I first skimmed this article:
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!!
Wow! I learnt something new. Thanks for writing this🙌
Thank you so much MS😇
Realle neat, no wonder why u were asking about previous sibling selectors. I learnt sth too 😁!
Thank You JC😁 Yes finally I found the solution, so thought everyone should know about this..!