How to change the style of the current link

[yolly]

hello, can anybody help me to change the style of the current link i selected. here's the code.

<nav id="nav">
 <ul>
  <li class="current"><a href="#top" id="top-link" ><span>Home</span></a></li>
  <li><a href="#portfolio" id="portfolio-link"><span>Portfolio</span></a></li>
  <li><a href="#about" id="about-link"><span>About</span></a></li>
 </ul>
</nav>

//style
#nav ul li a:hover
 {
  color:#FFF;
  background-color:#333;
 }

#nav ul li a.active
 {
  color:#FFF;
  background-color:#333;
 }

thanks in advance

[lucy24]

Give us a hint. What aspect of the current styles don't you like, and what do you want to see instead?

[Fotiman]

Welcome to WebmasterWorld!
Based on the code example you posted, I'm guessing that you think "active" implies the current page you're on. To be clear, it does not. The :active selector applies to the currently active link, which is active while you click on it. If that link causes another page load, then when that page loads your link is no longer active.
Side note, your CSS has a rule that would apply to a link with an "active" classname (as opposed to working on the :active state of the link).
Now, looking at your markup, I see you have a "current" class applied to the item that contains the Home link. If you're setting the appropriate item to be "current", then you could modify your CSS to do something like this:

#nav ul li a:hover
{
 color:#FFF;
 background-color:#333;
}

#nav ul li.current a
{
 color:#FFF;
 background-color:#333;
}

Is that what you're trying to accomplish?

[lucy24]

I strongly suspect there's some earlier CSS that's being overridden, hence the separate lines for "active" and "hover" (assuming it did mean :active, a detail I entirely missed) instead of a single "a" or "a:link". Though they could be collapsed into a single

#nav ul li a:hover, #nav ul li.current a

if they're meant to look the same.

:: detour to css docs ::

Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

Hey, thanks for the tip, w3! That didn't occur to me. (Though it does remind me of one page where I've got color-coded links to convey optional extra information. One visitor interpreted it as meaning she'd previously been to the pages with the green links; been meaning to check if she ever figured it out.)