CODEWITHSUNDEEP
csshtml
C3PO
C3PO

Reputation: 114

CSS visited links change background color

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.

Upvotes: 2

Views: 2011

Answers (3)

Telford Computer-DoctorLtd
Telford Computer-DoctorLtd

Reputation: 164

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; }

Upvotes: 1

Josh
Josh

Reputation: 73

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?

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11320

Try:

a:visited + #bix { ... }

You have to change the actual content.

Upvotes: 1

Related Questions