Selecting the preceeding sibling with CSS is so easy now!

Key Takeaways

The Impossible Is Now possible in CSS where we can select the preceding sibling of an element so when I'm hovering on this image I'm selecting the one that comes after it that was always possible but I'm now also selecting the one that comes before it and this is really cool and easy to do first on my avatars I do have a transition for my scale and then when I hover I'm scaling it up and then I can select the one that comes after so you can see it's only doing the one after it right now where that one is getting bigger so this is an avatar that comes after an avatar that is hovering that we're selecting right here here to do it the other way around though we can use the has selector so that looks something like this and now I'm saying if an avatar has the Avatar after it that is currently being hovered on then I can select that one as well and now they're both getting that hover effect on it and if you're worried about browser support you want to make sure this is just a progressive enhancement you can use a feature query like I'm doing above to make sure that we're only scaling up both the one before and after if our has sudo class is supported by the browser