Sibling Selectors

In the following examples, :hover could be replaced with....

• :focus-visible to select siblings of the focused item

• .w--current to select siblings of the active nav link, tab link, or anchor link

• .w-slider-dot.w-active to select siblings of the active Webflow slider dot

• .w-lightbox-item.w-lightbox-active to select siblings of the active lightbox thumbnail

• any other condition or selector you'd like

All Previous Siblings

.item:has(~ :hover) {
    opacity: 0.5;
}

All Next Siblings

.item:hover ~ * {
    opacity: 0.5;
}

Immediate Next Sibling

.item:hover + * {
    opacity: 0.5;
}

Immediate Previous Sibling

.item:has(+ :hover) {
    opacity: 0.5;
}

Sibling After Next Sibling

.item:hover + * + * {
    opacity: 0.5;
}

Sibling Before Previous Sibling

.item:has(+ * + :hover) {
    opacity: 0.5;
}

On item hover, select other items within the same parent (items don't need to be siblings)

.parent:has(.item:hover) .item:not(:hover) {
    opacity: 0.5;
}