Style Siblings Of Visited

I have HTML looking something like this:

• ...

Solution 1:

Tried to hack the above a bit, this selector should work. Here, am trying to select the sibling of any a nested under li, and later, I ignore the a which are not visited yet. This should simulate the effect you are looking for.

---

Preview for the same:

---

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>