0

I have the following HTML:

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

I want to add a:visited state to this link that also styles the sibling of class label. I have found out how to style the children divs of but not sure how to style the previous sibling. I want to accomplish this with only CSS.

Current CSS: (gray out all child divs of <a> when visited)

content:hover .childdiv1 .childdiv2 .childdiv3 {
   color: gray;
}
isherwood
  • 58,414
  • 16
  • 114
  • 157
tigoa
  • 53
  • 1
  • 5
  • 1
    `.outer` is the parent, not a sibling, and CSS cannot traverse up the tree. – DBS Oct 28 '21 at 16:11
  • Made a typo and meant class `label`, edited the post for clarity. – tigoa Oct 28 '21 at 16:12
  • There's also no previous sibling selector. That's still "up the tree". CSS doesn't look back during rendering. – isherwood Oct 28 '21 at 16:12
  • Unfortunately, css doesnt change parent style based on child status, and with siblings you can only change those that come after, not before (in your case, `label` can change `content` but `content` cant change `label`. – Caliph Hamid Oct 28 '21 at 16:13
  • If you are able to reorder the elements, this is achievable using `+` (You can style the `.label` to appear first visually, the `a` just needs to be first in the DOM) – DBS Oct 28 '21 at 16:14

0 Answers0