CODEWITHSUNDEEP
htmlcss
Jurudocs
Jurudocs

Reputation: 9165

Styling active anchor elements with css

I have some trouble to find a css solution for having an active anchor colored...

Why are the active anchors not red so that if clicked on "momo" momo keeps red? Or is active the wrong pseudoclass for that?

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>test</title>
    <style type="text/css">
        a:active{
        color:red;
        }
        a:hover{
        color:yellow;
        }
        </style>
    </head>

    <body>
    <ul> Navigation
    <li class="subli"><a href="#momo">momo</a></li>
    <li class="subli"><a href="#ipsi">ipsi</a></li>
    </ul>
    </body>

</html>

Thanks Juru

Upvotes: 6

Views: 20141

Answers (6)

Israel Teixeira
Israel Teixeira

Reputation: 175

Besides, you can use the target pseudo-class, which is pretty well supported already, to style the element referenced by the anchor.

<a href="#this-element">Click here.<div>
<div id="this-element">It's going to be red.<div>

<style>
  #this-element:target{
    color:red;
  }
<style>

Upvotes: 8

Prabhavith
Prabhavith

Reputation: 486

remove the :active property and just set a{color:red}

Upvotes: -3

Henesnarfel
Henesnarfel

Reputation: 2139

Switch the order you have your styling setup for your anchor tags

Change this

    a:active{
    color:red;
    }
    a:hover{
    color:yellow;
    }

To this

    a:hover{
    color:yellow;
    }
    a:active{
    color:red;
    }

:active only occurs when you click and hold on the element or the element is focused and you hit enter.

If you want to show the active url as a different color you are going to have to add a class to the current active element and style that class with the color you want

Upvotes: 1

Marcio
Marcio

Reputation: 622

I think you want to use visited not active

a:visited {color:red;}

Active activates only onClick
Visited stays red after you clicked

Upvotes: 1

Andrew Bacon
Andrew Bacon

Reputation: 546

The styles cascade, you need to switch them. 

a:hover {
    color:yellow;
}
a:active {
    color:red;
}

Upvotes: 0

Quentin
Quentin

Reputation: 943569

:active means "While being activated" e.g. when it is focused and the enter key is pressed or while it is hovered and the mouse button is being depressed. (Note that since you have have :hover after :active you'll always override it for mouse activates)

There is no pseudo-class for "Anchor with an href value that resolves to the current location". For that you need to need to modify the HTML (preferably before it gets to the browser, but you can use JS as well).

Upvotes: 8

Related Questions