CSS animations and the sibling selector

HTML-CSS
1

Hey guys!

I’m trying to understand CSS Animations, so I created a codepen to play around with it a little bit.

I created a bunch of shapes, mainly circles, and decided to try to animate all of them once the purple circle is hovered. I started with the yellow circle, however, I realized that I couldn’t seem to make it work. After some googling I found out that this is only possible in pure CSS if the elements are descendants or siblings to each other, which they are in my case, but I still couldn’t get it to work. To figure it out I decided to try and simply style the yellow circle with the sibling selector, but not even that is working. Any ideas as to why?

Thank you so much in advance!

Link to Codepen: https://codepen.io/Johju/pen/vwveNz
Browser: Firefox Quantum 67.9 (64-bit)

EDIT: Also just realized that styling the yellow circle works fine when I use any of the other classes, it’s just hover that breaks it. So confused.

2

It is because yellow is before hover, so it is not actually being selected - .hover ~ .yellow means “find the element with hover class and style all those with yellow class after it in the same container”

The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.

1 Like
3

Wow, I feel so stupid. That was way more simple than I thought. Thank you so much!