Making a style like "a:last" or something

trying to make it so last link clicked has its own stlye

[PublicSphere]

I have a set of links, each with individual a and a:hovers defined.

They are tabs so when you go to the page you've clicked to go on I want the tab to show as sticking out in the same way as I have it defined for the a:hover.

I was wonderng if there is anyway of doing this without changing the html for each page. So what I want is to use CSS to define a style for the last link that was clicked from the previous page.

Something like this is what I mean:

#about a{
background-image: url(images/design/about_tab.gif);
display: block;
margin: 0px;
padding: 0px;
float: left;
height: 43px;
width: 93px;

}

#about a:hover {
background-position: 94px 0px;

}
#about a:last {
background-position: 94px 0px;

}

Does anyone know if this is possible?

[Don_Hoagie]

Eh... I could've just let someone smarter post an answer, but i'm bored, soo...

I would say it's not doable in CSS, since that language doesnt operate on function, just on attributes... meaning it appears that to do what you want to do, there would need to be an actual attribute defined by CSS standards, so that you could have 'a', 'a:visited', 'a:hover', and 'a:last'.

How many pages do you have? If you're talking about a group of less than 10 pages, I don't see how it's any easier to attempt this in CSS than it is to just use HTML to differentiate the current tab; especially if you're using images for the tabs.

[createErrorMsg]

Does anyone know if this is possible?

If you mean does a ":last" link pseudoclass exist, the answer is no. CSS does not, alone, provide a means to identify the last clicked link.

However, there are innumerable ways to accomplish what you want.

If your pages are served via php, for instance, you can grab the superglobal $_SERVER['REQUEST_URI'] variable, which contains the url of the link clicked to load the current page. Compare it's contents against the href attributes of your navigation menu and style the matching link to display how you want.

Or use any one of several other methods (including other php methods, a few javascript options, and several that involve manual changes to the html...all coupled with CSS) to provide your users with a current link.

My personal favorite (and, as it happens, a pure CSS method) is detailed in msg#3 here [webmasterworld.com] . Note, however, that it does involve some alteration to the html source.

cEM

[Mobull]

What a very easy way is to do is to have some javascript color your link. You give the hyperlink an OnClick event in whichyou call a function. Within this function you tell the link to change it's color (while first resetting all other links to the standard color).

<script>
function changeColor(whichID){
var links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++)
{ links[i].style.color = 'black';
}
document.getElementByID(whichID).color ='red';
}
</script>

in your html file your place within the hyperlinks the onClick event like this:

<a href="myhtml.htm" id="myhtml" onClick="changeColor(this.id);">My Html page is here</a>

I have not rechecked my code above, but it should work almost like that ;-)
Also: it changes ALL link colors to black on your page. If you don't want that you will have to make sure it does not use all 'a' tags but anything else (e.g. class names)

regards