CSS visited links change background color

Question

Why doesn't code below work?

a:visited {
   background-color: yellow;
}

taken from: http://www.w3schools.com/cssref/sel_visited.asp

What I am trying to do is have two links pointing at two different points but covering the same box. If either link is visited I want to be notified somehow. Either change background-color or border color.

example:

<a id="linkA" href="http://www.w3schools.com/">
  <a id="linkB" href ="http://www.w3schools.com/html/">
   <div id="bix">Change content if either link is visited</div>
 </a>
</a>

CSS:

#bix {
   border: 3px solid orange;
}

#linkA #bix {
   border: 3px solid green;
}

#linkB #bix {
  border: 3px solid red;
}

Problem is that when you inspect the code, #LinkA does not contain #LinkB. How can I make #LinkB inside #LinkA, or any other way to make the #bix react to visits to either #LinkA or #LinkB.

You can't make LinkB "inside" of LinkA because an HTML `` is allowed to contain only `Inline elements except ` — that is, LinkA is not allowed (by spec) to contain the div or the other ``. When you write it that way the browser will re-interpret it to build a valid DOM tree ... probably like ` ... ...
...
` all as siblings. — Stephen P, Aug 29 '14 at 21:28
@StephenP Yes that is what I noticed. I couldn't figure out why. So I guess there is no way to have a sublink under a lot of links. — C3PO, Aug 29 '14 at 21:47
possible duplicate of [Why doesn't this a:visited css style work?](http://stackoverflow.com/questions/8331688/why-doesnt-this-avisited-css-style-work) — Hugo Sereno Ferreira, Aug 30 '14 at 00:21

score 1 · Answer 1 · answered Aug 29 '14 at 21:20

1

Try:

a:visited + #bix { ... }

You have to change the actual content.

answered Aug 29 '14 at 21:20

beautifulcoder

10,832
3
19
29

score 1 · Answer 2 · answered Aug 29 '14 at 21:23

1

The correct way to create a link would be

<a href="http://www.example.com">This Will Be The Link</a>

Then when this is visited the css to change the color would be

a:visited{
    color:blue;/*will change text colour*/
    background-color:yellow;/*will change background colour*/
}

The two locations appears redundant to me as it can only go to one location?

answered Aug 29 '14 at 21:23

Josh

63
1
8

There will be other links on the page that point to these locations. – C3PO Aug 29 '14 at 21:53

score 1 · Accepted Answer · answered Aug 29 '14 at 21:26

1

Nested anchor tags are forbidden in HTML syntax, hence why they're not showing up.

As @beautifulcoder suggested, change the content itself.

a:visited > #bix { color: red; }

answered Aug 29 '14 at 21:26

Telford Computer-DoctorLtd

164
9

And that's the problem, nested tags. I guess there is no way to fix this issue and I will have to figure out another way. – C3PO Aug 29 '14 at 21:55

CSS visited links change background color

3 Answers3