{"id":3861,"date":"2024-09-16T14:56:52","date_gmt":"2024-09-16T19:56:52","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3861"},"modified":"2024-09-17T08:54:43","modified_gmt":"2024-09-17T13:54:43","slug":"selecting-previous-siblings","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/selecting-previous-siblings\/","title":{"rendered":"Selecting Previous Siblings"},"content":{"rendered":"\n

I saw a video going around recently with a title that makes me feel very old: “Crazy CSS Using By Master CSS”<\/a>. The voice in it is also weird\/fake\/AI or something? Part of me finds it annoying and part of me finds it cool as I have a feeling English probably isn’t the creators native language and by making it English through the power of technology the video probably gets a broader audience. I guess it’s proof that if you make something super cool, the title doesn’t matter. <\/p>\n\n\n\n

Look at me \u2014 I’ve digressed before I even started.<\/p>\n\n\n\n

The demo they build in the video is fantastically cool. It’s a row of cards with a hover effect. The card being hovered has an effect where is appears to move toward you in 3D. Not only that, the two cards after<\/em> the hovered card have their own unique effects, enhancing the 3D. But the ultimate touch is that the two cards before<\/em> the hovered card also do, which has long been in “impossible” territory in CSS. No more!<\/p>\n\n\n\n

\"\"
Screengrab of the awesome hover effect from the video. <\/figcaption><\/figure>\n\n\n\n

Let’s cover that selector approach in CSS.<\/p>\n\n\n\n

The element being hovered. Simple.<\/p>\n\n\n

.card<\/span>:hover<\/span> {\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now the next element after it:<\/p>\n\n\n
.card<\/span>:hover<\/span> + .card<\/span> {\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
To be a bit more flexible and write a bit less code, we could write that like:<\/p>\n\n\n
.card<\/span> {\n  &:hover {\n\n    \/* next card *\/<\/span>\n    & + * {\n\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
And we can keep going to the 2nd card after<\/em> the hovered card:<\/p>\n\n\n
.card<\/span> {\n  &:hover {\n\n    \/* next card *\/<\/span>\n    & + * {\n\n    }\n    \/* next card after that *\/<\/span>\n    & + * + * {\n\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
So now we have selected the hovered card itself and essentially the next two to the right. What about those cards on the left? The “previous siblings”, as it were?<\/p>\n\n\n\n
Consider what we’ve already done. We’ve proven we can select the next<\/em> card after a selector. So what if we could say “if<\/em> the next card is hovered, select me?”. That’s what we can do with :has()<\/code> now in CSS. <\/p>\n\n\n
.card<\/span> {\n  &:hover {\n\n    \/* Select previous sibling! *\/<\/span>\n    :has(+ &) {\n\n    }\n  }\n}\n  <\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
If you find the nesting confusing, it’s just like this<\/p>\n\n\n
:has(+<\/span> .card<\/span>:hover)<\/span> {\n\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Which says “any element where the next<\/em> element is a hovered card.”<\/p>\n\n\n\n
I’ll go one level deeper there, and combine it all:<\/p>\n\n\n
.card<\/span> {\n  &:hover {\n\n    \/* next card *\/<\/span>\n    & + * {\n\n    }\n    \/* next card after that *\/<\/span>\n    & + * + * {\n\n    }\n\n    \/* previous card *\/<\/span>\n    :has(+<\/span> &) {\n\n    }\n    \/* previous card before that *\/<\/span>\n    :has(+<\/span> * + &) {\n\n    }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The selector part is the hard part here. Now that we’ve got that going, the styling could be anything. Keeping it a smidge simple at first, I’ll apply scale(1.3)<\/code> to the hovered element, scale(1.2)<\/code> to the next & previous sibling, then scale(1.1)<\/code> to the next & previous siblings after that. Plus a smidge of brightness filtering and we get:<\/p>\n\n\n\n