0

I have the following HTML:

<div class="outer">
  <a class = "content" href= "........">
     // a lot of different divs in here
  </a>
  <div class = "label">
     Label
  </div>
</div>

I want to apply styling to the label class if the link of class content is visited.

My CSS is the following:

.content:visited + .label {
   color: gray;
}

However, even when my link is visited, the label still shows unvisited state. After some research I found "If you use sibling selector such as :visited + span, the adjacent element will be styled as if the link were unvisited" at https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector.

Is there any workaround with pure CSS to make my use case work? Seems like this would be a common scenario.

tigoa
  • 53
  • 1
  • 5

0 Answers0