Стиль родных братьев посетил

Question

У меня HTML выглядит примерно так:

<ul>
    <li>
        <a></a>
        <a></a>
        <a></a>...
    </li>
</ul>

Я хочу применить стиль ко всем одноуровневым ссылкам посещенной ссылки. Я попробовал:

ul>li>a:visited ~ a{
    color: green !important;
}

И ничего не происходит. Но

ul>li>a:first-child ~ a{
    color: green !important;
}

отлично работает. Применение стиля к <li> с помощью посещенной ссылки также работает для меня.

Answer 1

Пытался немного взломать выше, этот селектор должен работать. Здесь я пытаюсь выбрать брата любого a, вложенного в li, и позже я игнорирую a, которые еще не посещены. Это должно имитировать эффект, который вы ищете.

---

Предварительный просмотр для того же :

---

ul > li > a ~ a:not(:visited) {
  color: red;
}

<ul>
  <li>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://stackoverflow.com">Stackoverflow</a>
    <a href="https://google.com">Google</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://medium.com">Medium</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
    <a href="https://google.com">Google</a>
  </li>
</ul>