:hover > :not(:hover)

hover обычно используется, чтобы выделить какой-то элемент. Но иногда красивей что-то сделать с остальными

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform 1s var(--ease-spring-3), opacity 0.3s var(--ease-3);
    }

    &:hover > li:not(:hover) {
      opacity: 0.25;
      transform: scale(0.8);
    }
  }
}

#css #tip

Самые значимые обновления CSS в 2024 года:

- Анимация height : auto + calc-size
- @starting-style: решает проблему, когда добавление элементов в DOM ломает анимацию
- Scroll-driven animations: эта функция добавляет в CSS анимации, запускаемые скроллом.
- Popover API: Позволяет создавать всплывающие подсказки и окна на чистом CSS
- Document view transitions: позволяет анимировать переходы между HTML-документами.

#css

В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css

10 вопросов проверить свою CSS грамотность

Ответы тут

#css