a:visited supersedes a.class, suggestions on how to change that?

Forum Moderators: not2easy

Message Too Old, No Replies

a:visited supersedes a.class, suggestions on how to change that?

csdude55

1:14 am on Oct 28, 2023 (gmt 0)

I've always assigned the link styles in <body>, like so:

<body text="#000000" link="#0000FF" vlink="#0000FF" alink="#0000FF">

And I have several a.foo classes set that override them, like so:

a.foo { color: #FFF; }

I tried to remove the code from the <body> tag and move it to the stylesheet (so it's cached, making the HTML page marginally smaller):

a,
a:visited,
a:active { color: #0000FF }

What I discovered, though, is that this supersedes the a.foo class! So the links that I wanted to be white all the time, for example, turn blue after they've been clicked.

I don't really want to change EVERY class to a.foo, a.foo:visited, a.foo:active { ... }, that's going to be a lot of excess code.

Any suggestions on how to make this work the way I'm expecting? Or should I just put these back in the <body> tag and be done with it?

not2easy

3:17 am on Oct 28, 2023 (gmt 0)

Inline CSS as shown in your <body text example, is read by the browser before (while) the page is rendered. Style sheets need to load as a linked resource so they are marginally slower.

CSS should describe properties for all states of links. If your <a class="foo" links remain the same color in all states without any properties for the various states, it is most likely due to your assigning properties inline to the <body> without mentioning color. Is the page html5?

csdude55

5:09 am on Oct 28, 2023 (gmt 0)

The code I posted above is the real code that I use. Except, of course, the name of the class isn't really ".foo". In that example, .foo is my main navigation, and I don't want those colors to ever change.

I just looked, and I have 27 classes of "a.something" in my .css. And in the regular text, I really just want the links to stay blue.

Is the page html5?

It WAS 4.01 Transitional, but if all goes well the patches I'm working on will allow me to change it to HTML5.

lucy24

4:46 pm on Oct 28, 2023 (gmt 0)

What's the problem with

a.foo, a.foo:visited {blahblah}

? On the broader scale of things, that's not an awful lot of added weight.

csdude55

4:10 am on Oct 30, 2023 (gmt 0)

Not a "problem", per se, just kind of a pain to do it for 27 classes. And to remember to do the same thing for any subsequent classes. And, of course, the excess code that I've been working really hard to minimize.

I was considering that a last resort, hoping that there might be a better solution.

lucy24

4:38 pm on Oct 30, 2023 (gmt 0)

Yah. I was thinking that since there's a construction

a[class] {blahblah}

(which is awfully useful for overriding) there ought to be a corresponding construction

a[noclass]
or a[!class]
or a[Class]

meaning �elements of this type that don�t have a class * but I looked and couldn't find one. Darn.

* Insert obligatory witticism about addresses in unclassy neighborhoods

csdude55

6:08 pm on Oct 30, 2023 (gmt 0)

Lucy! It looks like this might have worked:

a,
a:visited:not([class]),
a:active:not([class]) { color: #0000FF }

You were just an inch away from finding the answer! LOL

lucy24

8:00 pm on Oct 30, 2023 (gmt 0)

Woo hoo and hip hip hurrah! I have occasionally wanted such a construction for pages of my own, but always gave up in despair.