If you wanted to implement an ESPN style effect where you dim all the list elements that aren’t being hovered, how would you do that only using CSS?

<ul>
  <li>NBA</li>
  <li>NFL</li>
  <li>NCAAF</li>
  <li>MLB</li>
  <li>NCAAM</li>
  <li>NHL</li>
</ul>

Using the new :has selector in CSS, we can use the general sibling selector and a :hover pseudo-selector to target the elements before and after in just 3 lines of css.

See it in action here.

ul {
  display: flex;
  gap: 8px;
}

li {
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

li:has(~ li:hover),
li:hover ~ li {
  opacity: 0.5;
}

Shoutout to Stephanie Eckles who wrote a fantastic article covering the :has selector.