Pseudo-class Selector About a:active

[juandelacruz 0]

I am making a CSS based menu, I put a hover an active state on the menu style and they all working... until I realized that I wanted the active state to remain so that the user will see the current selected menu.

How will I do that without using script?

Here is the code of the test menu

<style type="text/css"><!--ul {	list-style: none;	margin: 0;	padding: 0;}li {	width: 600px;}li a {	width: 128px;	height: 20px;	display: block;	float: left;	background: #FF0000;	text-align: center;	font: bold 8pt Arial, Helvetica, sans-serif;	color: #0000FF;	letter-spacing: .1em;	text-decoration: none;	padding-top: 5px;	border: solid 1px #FFFFFF;}li a:hover {	color: #fff;}li a:active {	background: #990000;}--></style><h1>CSS Menu</h1><ul>	<li><a href="#">LINK</a></li>	<li><a href="#">LINK</a></li>	<li><a href="#">LINK</a></li>	<li><a href="#">LINK</a></li></ul>

If you run the codes above you will observed that the active state shows only if the menu was pressed down but after that it wasn't active again.

[k_nitin_r 8]

Hi!

You are probably looking for the VISITED pseudo-class selector.

Try this:

a:visited {background: #990000;}

My guess is that your understanding of active is actually the CSS definition of visited i.e. the behavior with which links that you've visited turn purple. If not, then what you want to accomplish would require some Javascript as what you observe is the normal behavior for the CSS within a browser.

Regards

[sonesay 7]

I dont think you will be able to do it without JavaScript as the link attributes need to be set and flaged as the active page somehow. JavaScript or on the server side end that renders the link with an additional properly such as class='activeLink' or whatever you will call it. This will have appropriate CSS styles applied to it to give that effect. I think that is what you are asking right? I don't think he is referring to the last visited as there can be many links hes visited and that would not indicate what page hes currently at.Regards

[jlhaslip 4]

My interpretation is that the Member wants the "current selected " item to be displayed differently.
When you are on the Home page, style the 'Home' link differently.
There rseveal ways to do that. Create a style for a class named ".current" and apply the style to the link in question.

How to determine the current link? Depends on whether you are using a server-side script.
Can you let us know if you have a php page going on there? or HTML only?
*edit*
Here is a link explaining how to do it in HTML only pages.

https://csscreator.com/topic/css-current-page-nav-link-highlight

[truefusion 3]

How will I do that without using script?

You won't be able to without some content-aware engine, that is, if you're working with dynamic content. Using JavaScript won't be the best approach, then. You're better off with a content management system that marks the menu item based on what page your on and then see if something like what sonesay mentioned is within the source code of the HTML that was generated. However, although the link that jlhaslip posted could work with dynamic content, it is better suited for static content. So if you're working with static content, i would suggest that approach instead.

[juandelacruz 0]

As I summarized all your reply's, I really won't be able to created what I wanted to do with menu with the CSS alone and without the script or a content-aware engine (as truefusion mentioned).

I've just done this with the Visual Studio and I was just trying my luck that maybe someone here could possibly do that.

Thank you all for your opinions, I really appreciated it.

My interpretation is that the Member wants the "current selected " item to be displayed differently.When you are on the Home page, style the 'Home' link differently.
There rseveal ways to do that. Create a style for a class named ".current" and apply the style to the link in question.

How to determine the current link? Depends on whether you are using a server-side script.
Can you let us know if you have a php page going on there? or HTML only?
*edit*
Here is a link explaining how to do it in HTML only pages.

https://csscreator.com/topic/css-current-page-nav-link-highlight

I'm just doing a HTML only, I tried the link and that's what I really wanted to do... Halellujah!

Thank's a lot!
Edited May 22, 2009 by truefusion (see edit history)