CSS a:visited back to default

[csdude55]

Is there any way to say something like:

a:link { color: #0000FF }
a:hover, a:visited { color: default }

The issue I'm having is that I want most of my a:visited to be the same color as a:link, but the default color of a:link varies (sometimes blue, sometimes gray, sometimes black or orange... it depends on the section it's in).

I COULD go back and apply a class to every single link, but it would be easier to just apply a class to the a:visited that I want to have a different color. But to do that, I need for the majority to revert back to its original color by default.

default isn't a real value, of course. I tried initial, too, but that reverts to the original font color instead of the a:link color.

Any thoughts?

[lucy24]

I want most of my a:visited to be the same color as a:link

Are you absolutely, 100%, beyond-the-shadow-of-a-doubt, no-negotiation positive that you want your links to behave differently than the way users have learned to expect over the last quarter-century? People expect links they have visited (a:visited) to look different from links they have not yet visited (a:link), and may get confused if they don't.

If you want some element to behave one way most of the time, and behave a different way only rarely, the ordinary method is to say
element {blahblah style}
element.different {blahblah some-other-style}
so you don't have to apply a classname to every occurrence of the element. The only thing that matters is frequency.

[ipco]

color of a:link varies (sometimes blue, sometimes gray, sometimes black or orange... it depends on the section it's in).

Why? your style should be consistent throughout. Make life easy for your audience :-)

[not2easy]

You have the color of visited set to be the same color as "hover" state in the example posted. If you really want "visited" to revert to the color of the link, use:

a:link, a:visited { color: #0000FF }
a:hover { color: default }

so that wherever you set the color of the link, you would also be setting the color for visited. Note that would require separate classes for each section, but that is likely how you would manage those link colors anyway.


_{This is your classifieds site, I hope? I think it helps to know if this isn't for a blog.}

[csdude55]

Haha, I knew you guys were gonna give me a hard time :-P

I use text for virtually everything in the header; the logo is text, navigation, subnavigation, breadcrumbs, everything. But I don't want these to change color; I want them to revert back to whatever their default was. So, @not2easy, they wouldn't all be #0000FF, that's just an example... the logo would use 3 different colors, navigation another, subnav another, and breadcrumbs another.

I also have locally sold ads, and I don't want the color in them to change, either.

So where I'm using HTML5 types, I don't want <header>, <aside>, or <footer> to change, because they don't really look like text links to the user. I only want links in <section> to change.

When I change the general a:link type in the stylesheet, though, it changes [u]every[/u] link, even though I've defined the color later in the stylesheet with a class (so I guess a type supercedes a class unless you use !important?).

I was just hoping there might be something simpler than using 100 new classes, but I'm guessing that there's not :-(

[lucy24]

Does your later-in-the-stylesheet definition say specifically
a.class:link
? Pseudo-classes do seem to take priority, so a split between
a.class
and
a:link
may not work. You'd need to say things like
header a:link
and so on.

Do everything you can to avoid !important, because it's just sweeping things under the rug. Instead figure out what's causing the behavior. For example if you've got
div.classname p {blahblah}
in one place, and
p.othername {different blahblah}
in another place, then you also need to specify
p.othername, div.classname p.othername {different blahblah}
or simply
p.othername, div[class] p.othername {different blahblah}
if you want <p class = "othername"> to behave a certain way even when it is located inside <div class = "classname">.

[csdude55]

Does your later-in-the-stylesheet definition say specifically
a.class:link

That's a good point, and no, I don't... I just say a.class without the pseudo class. I try to avoid pseudo classes because, as I understand it, they're the slowest of all? But that might be the right solution here...