How to override A:visited

**ta158897** · 06-11-2008, 01:11 AM

Hi,

I am new to CSS. My website -it is about online training. Suppose there are 3 chapters. Each chapter has 10 units and there is a link for each unit. The homepage will contain all 10 links one chapter at a time. (This is parameterized).

While chapter-1 is getting discussed, all the links gets visited status. Now when chapter-2 starts - all the links are already in visited status. But in reality users have not started visiting any unit.

How can I reset visited status as new chapter starts?

Thanks

**rangana** · 06-11-2008, 02:02 AM

Ensure that the hierarchy of the pseudo elements are arranged as in LoVe HAte.

As in:

Code:

a:link{}
a:visited{}
a:hover{}
a:active{}

If nothing works, up the code.

**ta158897** · 06-11-2008, 03:42 PM

Hi

There is nothing wrong with the code. Heirarchy is OK. But there are times when I want to reset the link to ("non-visited") even though they are visited.

Is there any way to do it?

Thanks

**ta158897** · 06-11-2008, 03:54 PM

Hi

I am not sure if the question is OK for this forum.

In my website, there is a situation when I want to reset the "visited" links back to original state - as if they were not visited.

How can I do that?

Thanks

**Medyman** · 06-11-2008, 04:28 PM

The only way (that I know of) to do it is to clear the user's history. I don't recommend or condone doing that, but nonetheless it is an option.

**Medyman** · 06-11-2008, 04:33 PM

Please don't double post. Your question was answered in the other thread.

**boogyman** · 06-11-2008, 06:13 PM

Originally Posted by Medyman

The only way (that I know of) to do it is to clear the user's history. I don't recommend or condone doing that, but nonetheless it is an option.

which you cannot do with Javascript alone.

There is a way to accomplish what you would like, however it would disable all the default "color" styles for the anchor elements you apply it to.

What you would do is create a style that applies to all anchor tags within an specific element.

HTML Code:

<p class="ddlink"><a href="/path">LINK</a></p>

Code:

p.ddlink a:link, p.ddlink a:visited {
     color: #0000ff;
}

the above would keep the color of the anchor text blue whether they visited that link or not.

now saying that, its generally not good coding practice to break the conventions of the web.

**rangana** · 06-12-2008, 01:01 AM

I made a response about this in the other thread, and was convinced you might need some JS to force the color. You might find this code useful:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#nav a {
    color:#000;
    text-decoration:none; 
 }
ul
{
list-style-type:none;
font-family:Tahoma;
font-size:10pt;

}
</style>

<script type="text/javascript">
window.onload=function() 
{
	var accept=document.getElementById('nav').getElementsByTagName('a');
	for(var i=0;i<accept.length;i++)
	{
	accept[i].onclick=function() 
		{
		for(var i=0;i<accept.length;i++) 
			{
			accept[i].style.color='#222';
				{
				this.style.color='#f00';
				}
			}
		}
	}
 }
</script>

</head>
<body>

<ul id="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>

</body>
</html>

Hope it helps.

**magicyte** · 06-23-2008, 05:08 PM

I have a special way of actually forbidding per se fake links to become visited (turning purple). These things that I make are not actually links. They are spans that act as special links. I will leave the code for you to see:

Code:

<html>
<head>
<title>
Fake Links
</title>
<script language="JavaScript">
function red(obj)
{
obj.style.color="red";
}

function blue(obj)
{
obj.style.color="blue";
}

function transport(obj)
{
window.location.href=obj;
}
</script>
</head>
<body>
<span style="font-family:Arial;color:blue;cursor:hand;" onmouseover="red(this)" onmouseout="blue(this)" onclick="transport('http://www.dynamicdrive.com/')">
Dynamic Drive
</span>
</body>
</html>

Hope it helps with something, though considering that every other user posted some VERY USEFUL scripts, you probably won't need it. Just saying...