:has() + :not()

Hovering one row quiets the others

CaveatThis re-evaluates on every pointer move across the list. On a few dozen rows it is free; on a table of several hundred it is a visible frame cost, and the fix is to move the rule to the row rather than the list.

FallbackGuard it with @media (hover: hover). On touch the hover state latches after a tap and leaves every other row dimmed with nothing hovered.

@media (hover: hover) {
  /* only while something is hovered */
  .list:has(a:hover) a:not(:hover) {
    opacity: .35;
  }
}

Published 3 Aug 2026