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;
}
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.
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