change div style when href link is visited - html

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!

Answer 1

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>
Click me to replace the content in the container.

Answer 2

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