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><ahref="https://google.com">Google</a><ahref="https://medium.com">Medium</a><ahref="https://stackoverflow.com">Stackoverflow</a><ahref="https://google.com">Google</a><ahref="https://medium.com">Medium</a><ahref="https://medium.com">Medium</a><ahref="https://google.com">Google</a><ahref="https://google.com">Google</a><ahref="https://google.com">Google</a></li></ul>