How do you style all siblings on hover with just CSS?

Sibling combinators only apply styles to siblings that come after the element in the DOM, so how do we style all siblings, before or after the element, when it’s hovered?

e.g. fading items in a list to highlight the item being hovered

Answer

One solution is to use the child combinator on a parent element to apply styles to all children when the parent is hovered.

Then use the :not() pseudo-class to prevent those styles from being applied to any child also being hovered.

.parent:hover > .children:not(:hover) {
    opacity: 0.5;
}