change div style when href link is visited

Question

I currently have a html file that contain such div:

div.myClass:visited {
  background-color: red;
 }

<div class="myClass" href="link">
</div>

What I am trying to do here is to have div direct to the given link and if the link is visited already, div background-color changes to red. The link does work fine, however changing the background color when the link is visited does not work. Is there a way to change the background color of div that contains a visited link? Thank you!

`div` elements do not have a `href` attribute. Why don’t you just use an `a` element, if you want to link somewhere? Everything else does just not make any sense. — CBroe, Jun 06 '15 at 00:32

score 0 · Answer 1 · edited Jun 06 '15 at 00:35

Use Javascript to replace innerHTML

<script type = "text/javascript">
    function ReplaceContentInContainer(id, content) {
    var container = document.getElementById(id);
    container.innerHTML = content;
} </script>

<div id="example1div" style="border-style:solid;padding:10px; text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div','Whew! You clicked!')">Click me to replace the content in the container.</a>

score 0 · Answer 2 · edited May 23 '17 at 12:05

use <a/> instead of div and style it like div by giving it display:block; and width and height

for example:

<a class="myClass" href="http://www.lego.com/en-us/"></a>

CSS:

 .myClass {
     background-color: blue;
     width:200px;
     height:200px;
     display:block;
 }

.myClass:visited {
     background-color: red;
 }

.myClass:hover{
     background-color: green;
}

View on CodePin

Also look at :

How can I detect visited and unvisited links on a page?

Privacy and the :visited selector

change div style when href link is visited

2 Answers2

View on CodePin