Style siblings of visited

Question

I have HTML looking something like this:

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

I want to apply a style to all sibling links of the visited link. I tried:

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

And nothing happens. But

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

works perfectly fine. Applying a style to <li> with a visited link works for me, too.

you cannot, styling using :visited is restricted to some styles (developer.mozilla.org/en-US/docs/Web/CSS/…) — Temani Afif
Does that mean you want to target links both before and after the visisted one? ... If yes, then no, you cannot do that for siblings being positioned before the visited one in the markup. For that you need a script. — Asons
With :visited, along with limitations of which properties you can style, you can't target other elements other than the link itself, hence your first style doesn't work. — Asons

Mr. Alien Mr. Alien · Accepted Answer · 2019-03-13T19:23:36

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>

Style siblings of visited

1 Answers