Previous sibling elements selection?

Question

Imagine you have 5 list item, when you hover a random itme the first Previous sibling style should change just one item not all previous siblings.
I searched alot but there is no Previous sibling selector, does anyone have a trick or solution for that.
https://code.sololearn.com/WEr0EfsRYV2v/?ref=app

Answer 1

Yasin Rahnaward
Not really a way to refer a previous sibling element, rather a bit of abuse of pseudo XD

https://code.sololearn.com/WK9O0UaS0KfC/?ref=app

I embed the link to the blog where I found it in CSS tab, and here. For anyone who might be interested.

https://tobiasahlin.com/blog/previous-sibling-css-has/
(Edited)

Answer 2

Yasin Rahnaward Hope this resource will be helpful :

https://www.freecodecamp.org/news/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d/

Answer 3

I leave you a link that I think can help you, there is also the option to put an id and apply the style you want. 👉🏼https://www.w3schools.com/cssref/sel_hover.php

Answer 4

If we use JS to handle the "click" event, we can refer adjacent list item using previousElementSibling

https://www.w3schools.com/jsref/prop_element_previouselementsibling.asp

But I don't know how to map CSS hover to Javascript.

Answer 5

Yasin Rahnaward
you need previousElementSibling
and nextElementSibling

:hover seems to work like :active in mobile devices...😅 and it occassionally fails for me if I click fast .
Not sure why.
Maybe somebody can debug it?

also it is click, not hover. So no smooth transition, at least in my phone. Maybe you can fix it?

--edit
I made it all javascript.
css:hover is too unpredictable.

https://code.sololearn.com/WdGP2Dk70r0j/?ref=app

Answer 6

Hi Ipang
I want to set a bottom-right border radius for Previous sibling and a top-right border radius for next sibling of hoverd element. There is a next single sibling selector but I can't found a way to select single Previous sibling to a hoverd element.

Answer 7

Hello Yasin,
Is it the previous sibling (a list item before the current - chronologically), or a previously hovered item?

Answer 8

Thanks R🌸🇮🇳
Actually it's a good blog post which Implement star system but it's not what I want.
For clearing the issue whenever you click on a random item list its need to select the the single nearest Previous sibling(one sibling) and single nearest next sibling (one sibling)of targeted (hovered ) element.

Answer 9

Bob_Li
Thanks alot
It will work for desktop on hover?
I am developing a dashboard in react, and a css solution will be helpful for me , not pure css if there is any trik with styled-compoent will be also ok .

Answer 10

Ipang
looks good. 😎
I prefer this simpler solution..

css pseudo elements have great potential if you master it. I will study this some more.

Your beautifully simple solutions are always amazing.

Answer 11

Still is not exactly *referring a previous element* Bob_Li

Answer 12

Ipang
Thanks alot 🤗🐧

Answer 13

Yasin Rahnaward
No problem 👌

Answer 14

Bob_Li
Idk why you compare CSS :hover with JS while you already know the reason for the *flaw*.

The :hover pseudo didn't add/remove classes. It is the addition of class by JS that allows persistence of state ...

Answer 15

Ipang
you're right.
You still have to use js to keep the state.
Now I'm wondering how to do that, while keeping the css styling. 😅
I just tend to obsess about things working

--edit
it's not easy.
Here is my attempt at 'fixing' the css hover state with js. It's very unwieldy.

I have not been able to just assign the computedStyle to the items directly. Doing so seems to hang the program.

https://code.sololearn.com/W0Llyb5mo48Q/?ref=app

Answer 16

nextElementSibling returns null if there are no more sibling elements after the current element..

Answer 17

⭐ⓗⓐⓟⓟⓨ⭐
That is why there is additional check conditions in the code.

Answer 18

Yasin Rahnaward
too hacky for me, so no guarantee. You just have to find out for yourself. 😅

I have not tried it on desktop and various browsers and screen sizes. I just thought that it should be doable.

the effect is not very stable when clicked fast. There must be a better way for this.

Answer 19

Ipang
I was playing with your solution, but it has one flaw.

https://code.sololearn.com/W7xp7LT2wPPo/?ref=app

Answer 20

Bob_Li
Ipang
I was playing with your solution, but it has one flaw.
This is the result which i wanted.
😊🐧