Link order question

[tshad]

I am trying understand the order of link styles. This caused me a bit of
problems when I changed my links just lately.

I have 4 files to show what is happening.

In the first file, http://www.payrollworkshop.com/samples/testLink1.htm, I
have no classes and all the links use the Browser defaults.

In the 2nd file, http://www.payrollworkshop.com/samples/testLink2.htm,I
added a class that sets the color to red and have set one of the links to
that class. It shows red no matter whether active, visited or link. This
is exactly what I was looking for. I wanted to set some links to be one
color, but not change color when it first visits a page, as normally happens
with links.

I that that was fine until I started adding in other styles using the "a:"
styles. By adding the styles, as shown in
http://www.payrollworkshop.com/samples/testLink3.htm, and doing nothing else
all the links, including the ones with the class definition on it - they all
changed to the new colors.

This is confusing. If the class overrode the default link behavior, why
wouldn't it also override the new link behavior. I would have thought that
the new link behavior would act the same way and affect only those that
didn't have a specific class assigned to it.

Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took out
all the specific links (a:link, a:visited and a:active). Then the old class
(.toplink - which is not a link behavior) - worked over the "a" behavior.
Why didn't the 1st link use the "a" definition instead of the .toplink
behavior.

Very confusing.

Thanks,

Tom

 

[Mitja]

Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took out
all the specific links (a:link, a:visited and a:active). Then the old
class (.toplink - which is not a link behavior) - worked over the "a"
behavior.
Why didn't the 1st link use the "a" definition instead of the .toplink
behavior.

As you examples neatly show, the following rule precedence applies
(weakest to strongest):
a
a.someStyle
a:someState
a.someStyle:someState
a#someId (not sure about this one, but it doesn't matter in your case)
a#someId:someState

So you can solve your problem by leving a {...} as it is and substituting
a.foo {}
for
a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}

HTH
Mitja

 

[tshad]

As you examples neatly show, the following rule precedence applies
(weakest to strongest):
a
a.someStyle
a:someState
a.someStyle:someState
a#someId (not sure about this one, but it doesn't matter in your case)
a#someId:someState

So you can solve your problem by leving a {...} as it is and substituting
a.foo {}
for
a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}

What do you mean by "someState"?

The above makes sense except for one thing..

Why does the .toplink style take precedence over the "a" in the 4th example?
I would have thought the 1st link would have been yellow. The
aactive,link,visited) took precedence of the .toplink (which is not a link
style). So why didn't the "a" also take precedence over the .toplink?

Thanks,

Tom

 

[Beauregard T. Shagnasty]

I am trying understand the order of link styles. This caused me a
bit of problems when I changed my links just lately.

"Las Vegas Has Animals"

...a mnemonic for the order you need to set the styles of your links.

a { .. }
a.link { .. }
a.visited { .. }
a.hover { .. }
a.active { .. }

 

[David Håsäther]

a.link { .. }
a.visited { .. }
a.hover { .. }
a.active { .. }

a:link { .. }
a:visited { .. }
a:hover { .. }
a:active { .. }

 

[Beauregard T. Shagnasty]

a:link { .. }
a:visited { .. }
a:hover { .. }
a:active { .. }

I'll see your two dots and raise you one. <g> (heh, hasty typing
instead of pasting, before second cup of coffee...)

 

[Els]

I'll see your two dots and raise you one. <g> (heh, hasty typing
instead of pasting, before second cup of coffee...)

What about a:focus?

 

[Beauregard T. Shagnasty]

What about a:focus?

Between visited and hover, if used.

 

[Mitja]

What do you mean by "someState"? hover/active/...

The above makes sense except for one thing..
Why does the .toplink style take precedence over the "a" in the 4th
example?

Because it's more specific. See also below.

I would have thought the 1st link would have been yellow. The
aactive,link,visited) took precedence of the .toplink (which is not a
link style).

Sure it is. ".toplink {}" means something like "justAboutAnything.toplink
{}" and can also be written more expressively as "*.toplink {}". You can
imagine it to be "a.toplink, b.toplink, p.toplink, td.toplink,
table.toplink, pre.toplink, button.toplink, body.toplink [etc etc] {}".

 

[tshad]

What do you mean by "someState"? hover/active/...

The above makes sense except for one thing..
Why does the .toplink style take precedence over the "a" in the 4th
example?

Because it's more specific. See also below.

I would have thought the 1st link would have been yellow. The
aactive,link,visited) took precedence of the .toplink (which is not a
link style).

Sure it is. ".toplink {}" means something like "justAboutAnything.toplink
{}" and can also be written more expressively as "*.toplink {}". You can
imagine it to be "a.toplink, b.toplink, p.toplink, td.toplink,
table.toplink, pre.toplink, button.toplink, body.toplink [etc etc] {}".

I understand that. But my question has to do with the fact that .toplink is
not a specific link style class.

<style type="text/css">
..toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: red;
text-decoration: none;
font-weight:bold;
}
a {
color: #FFFF00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
a:visited.orangeClass {
color:#FF6600;
}
a:link.orangeClass {
color:#FF6600;
}
a:active.orangeClass {
color:#FF6600;
}
</style>

<a href="#" class="toplink">Link 1</a> to the next page</p>

Toplink is not a link class, yet it overwrote "a" (and the browser default
link classes).

But in this case:

<style type="text/css">
..toplink{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: red;
text-decoration: none;
font-weight:bold;
}
a {
color: #FFFF00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
a:visited {
color:#green;
}
a:link {
color:green;
}
a:active {
color:green;
}
</style>

<a href="#" class="toplink">Link 1</a> to the next page</p>

Toplink doesn't overwrite avisited,link,active). Why does it have more
precedence over "a" and not the others (which are not classes either). I
would think Toplink is more specific for them, if it was for "a"?

If this is the case, I would assume the precedence should be (unless I am
missing something, which I am sure I am):

browser default
a
someStyle
a.someStyle
a:someState
a.someStyle:someState
a#someId (not sure about this one, but it doesn't matter in your case)
a#someId:someState

or

browser default
a
a.someStyle
someStyle
a:someState
a.someStyle:someState
a#someId (not sure about this one, but it doesn't matter in your case)
a#someId:someState

Not sure which.

Thanks,

Tom