link:visited doesn't work with sibling combinator

Question

I need to change style of neighboring element when link is visited:

a:visited + div { color: #000 }

This does not work. What can I do to get the styling I need?

Answer 1

I did not find anything in the Specs, that expicitely prohibits the sibling combinator from working with this pseudo class, however:

The :visited pseudo-class is a special case, since it can be abused to infringe the users privacy. That's why browser are allowed to treat :visited differently. To my knowledge, browsers simply lie about the styling of visited links, while still applying the styles - technically they would be allowed to not apply :visited styling at all. I suppose, that most vendors just decided, to not apply styling to sibling combinators ^{( Since this is only speculation on my side, if somebody has a concrete source for this, please confirm.)}.

See the note in the spec

Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

console.log(`Browser is lying about  the color of the i element - should be olive, but is ${window.getComputedStyle(document.querySelector("a i")).color} (red) instead.`);

a{
  color:red;
  display:block;
  text-decoration:none;
  font-size:20px;
}
a:visited{
  color:#bada55;
}
a:visited ~ div{
  color:LightGoldenRodYellow !important;
}
a span{
  color:RebeccaPurple;
}
a:visited i{
  color:Olive;
}
a:last-of-type{
  color:hotpink;
}
a:last-of-type + div{
  color:MediumSeaGreen;
}

<a href="#">Is red while not visited! <span>Is always RebeccaPurple!</span> <i>Should be olive once link is visited!</i></a>
<a href="#">Will be #bada55 when visited!</a>
<a href="#">Will be hotpink!</a>
<div>Should be LightGoldenRodYellow, but is MediumSeaGreen!</div>