link button changes with CSS ?

In simple term i would like to achieve something we have on stack overflow top navigator where the color of the button which is active is different BUT using CSS only NOT JavaScript ?

But the a:active does not seems to be working as expected. I saw some very common examples where this is done by assigning the class to active element in the markup from server or client side. Is that possible only using the CSS ?

<HTML>
    <HEAD>
        <TITLE>Its Nav</TITLE>
        <STYLE type="text/css">
            div {
                width:200;
            }
            ul {
                list-style:none;
            }
            ul li a {
                padding:2 4 2 4;
                border:1px solid blue;
                display:block;
                text-decoration:none;
            }
            ul li a:active {
                color:green;
            }
            ul li a:hover {
                color:red;
            }           
            ul li a:link {
                color:gray;
            }
        </STYLE>
    </HEAD>
    <BODY>
    <div>
        <ul>
            <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>
            <li><a href="#" >link six</a></li>
            <li><a href="#" >link seven</a></li>
            <li><a href="#" >link eight</a></li>
            <li><a href="#" >link nine</a></li>
            <li><a href="#" >link ten</a></li>
        </ul>
    <div>
    </BODY>
</HTML>

If I understand what you want to do, using a:active won't help you. The css pseudo-class active shows when the link is clicked (exactly when it is clicked and before the next page loads). After that, it changes to visited.

Edit: I didn't see that you wanted an exclusively CSS solution first. I believe that what you need is something that has already been answered before. Check http://stackoverflow.com/questions/2147844/how-to-set-a-active-link-as-default-when-page-first-time-load an see if it helps :)

Since you don't want a JavaScript solution, I suggest creating a new class for the active <li> tag in your navigation bar. You can do that dynamically (for example with php) or manually for each page within the html.

As other people already commented, it'd be easier to give you an answer that you can apply directly, if you posted your code.

ansaurus

tags:

views:

answers:

link button changes with CSS ?

related questions