Although there is no direct CSS selector to find the previous element siblings, we can use CSS hacks to get all previous element siblings by using CSS selectors like ~, +, and *.

demo

Selectors for previous siblings

To find out previous element siblings we can make use of : has() CSS selector and ~ general sibling selector like this :has(~ &)

<div class="cards">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

.cards {
    display: flex;
    gap: 10px;
    span {
        height: 300px;
        width: 200px;
        background: red;
        transition: all 0.3s ease-in-out;
        &:hover {
            transform: scale(1.1) translateX(calc(5px / 2));
            :has(~ &),
            ~ * {
                opacity: 0.5;
                transform: scale(0.96);
            }
        }
    }
}

Next element siblings

To find out the next element siblings after the current element we can make use of ~ and * means any siblings after the current element like this ~ *

I hope you got a clear idea of how to use these CSS selectors to make your CSS skills powerful & create complex designs easily using all these selectors.

for more frontend tutorials and hacks like this please subscribe to 👉 YouTube