Styling links using CSS

Question

I am trying to give style to my links and I am using this order:

a{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

(I am not using a:link... I just use the id's to make the links work.)

The thing is that my "a" & "a:hover" are working but "a:visited" & "a:active" are not!!! Is there a solution? I am only tying to give different color to "a:active":

a:active{
 font-family: gabriola, verdana; font-size: 26px; color: #e6e8fa; text-decoration: none; vertical-align: middle; border: none; outline: none;
}

What exactly isn't working? See w3schools.com/css/tryit.asp?filename=trycss_link for an example. Your code seems to be correct. — Matthijs Bierman
– Matthijs Bierman, Commented Jul 22, 2011 at 16:42
a:active is not... because my "links" look like this <a id=goto"> Then I am retrieving the id and sent the user where I need to. "a" and "a:hover" are working. "a:active" not... And I think @Kerrek is right — Pavlos1316
– Pavlos1316, Commented Jul 22, 2011 at 16:57

Kalessin · Accepted Answer · 2011-07-22 17:04:18Z

2

I read somewhere (a quick Google suggests it could have been anywhere) that it's easy to remember the order for anchor styling declarations using the mnemonic L o V e / H A t e:

a:link
a:visited
a:hover
a:active

answered Jul 22, 2011 at 17:04

Kalessin

2,3022 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kerrek SB · Accepted Answer · 2011-07-22 16:37:32Z

1

~~active doesn't make sense for non-link anchors~~ (not sure about this actually, :active might be triggered on any visible element). Use this:

a:link, a:visited               // normal links
a:link:hover, a:visited:hover   // link with mouse-over
a:link:active, a:visited:active // link being clicked (mouse-down, etc.)

Also available, but less specific:

a        // any anchor
a:hover  // any anchor with mouse-over

The latter two will have their properties overridden by the more specific ones above if the anchor actually has the href attribute set.

edited Jul 22, 2011 at 16:37

answered Jul 22, 2011 at 16:25

Kerrek SB

481k96 gold badges904 silver badges1.1k bronze badges

14 Comments

Pavlos1316 Over a year ago

But using "a:link" I will have to add href="" to my anchors to work right?

Kerrek SB Over a year ago

Well, what do you want to style? a:link styles anchors with href, while a styles all anchors.

Kerrek SB Over a year ago

Oh, perhaps you can actually apply :active to all elements. I'm not sure if that's standardized behaviour, the spec only says "while an element is being activated by the user".

Pavlos1316 Over a year ago

I want to style my anchor that works as a link, without including href... And as you 're saying I cannot do that for active links...?

Quentin Over a year ago

@Pavlos1316 — in order to work as a link, you need an href attribute. That is how you create links.

|

Collectives™ on Stack Overflow

Styling links using CSS

2 Answers 2

Comments

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related