By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,180 Members | 1,012 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,180 IT Pros & Developers. It's quick & easy.

a:visited priority : a bug or a feature

P: n/a
VK
a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}
I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?

Oct 30 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Els
VK wrote:
a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}

I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?


How about just putting them in the right order?
Like:

a:link
a:visited
a:focus
a:hover
a:active
?

No bug - no fix needed :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 30 '05 #2

P: n/a
VK

Els wrote:
VK wrote:
a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}

I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?


How about just putting them in the right order?
Like:

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

What do you mean by "right order"? Alphabetically it should be active,
focus, hover, link, visited. Logically (from state to state)it should
be link, hover, focus, active, visited.

What's so right in the order you've indicated?

And why this sequence has effect on link color style priority?

Oct 30 '05 #3

P: n/a
Els
VK wrote:
Els wrote:
VK wrote:
a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}

I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?
How about just putting them in the right order?
Like:

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


What do you mean by "right order"?


The right order for the effect you want - which happens to be the
effect most people want.
Alphabetically it should be active,
focus, hover, link, visited.
I've only once seen someone alphabetize their style rules, and believe
me, it did not quite have a good effect on the displayed page.
Logically (from state to state)it should
be link, hover, focus, active, visited.
In that order, you are assuming no one hovers over visited links. In
fact, it makes for the unwanted effect you are trying to beat.
What's so right in the order you've indicated?
Did you try it?
And why this sequence has effect on link color style priority?


Because of the cascading effect of style rules. If two rules are
equally specific, the last one in line has effect.
Las Vegas (Forest) Has Animals.
link - visited - focus - hover - active.

Just try it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 30 '05 #4

P: n/a
VK

Els wrote:
VK wrote:
Els wrote:
VK wrote:

a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive,
so visited links will not "hover".
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}

I used this fix for year and just got curious: is it a bug or
considered to be a documented feature?

How about just putting them in the right order?
Like:

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


What do you mean by "right order"?


The right order for the effect you want - which happens to be the
effect most people want.
Alphabetically it should be active,
focus, hover, link, visited.


I've only once seen someone alphabetize their style rules, and believe
me, it did not quite have a good effect on the displayed page.
Logically (from state to state)it should
be link, hover, focus, active, visited.


In that order, you are assuming no one hovers over visited links. In
fact, it makes for the unwanted effect you are trying to beat.
What's so right in the order you've indicated?


Did you try it?
And why this sequence has effect on link color style priority?


Because of the cascading effect of style rules. If two rules are
equally specific, the last one in line has effect.
Las Vegas (Forest) Has Animals.
link - visited - focus - hover - active.

Just try it.

I did - it works. Thank you for your clear answers and your patience.
I'm still staying with !important (it seems more explicit and secure)
but now I know *the truth* ;-)

Oct 30 '05 #5

P: n/a
VK wrote:
How about just putting them in the right order?
Like: a:link
a:visited
a:focus
a:hover
a:active
What do you mean by "right order"? Alphabetically it should be active,
focus, hover, link, visited. Logically (from state to state)it should
be link, hover, focus, active, visited.

What's so right in the order you've indicated?

And why this sequence has effect on link color style priority?


I think it's a kind of urban legend. Someone tried to make all these
link styles work and find that this particular order works. Now, every
time you complain one of your link styles doesn't work as expected, the
only answer you get is to use the "right order".

According to the W3 docs, there's two kinds of link "styles": The link
pseudo-classes (link, visited) and the dynamic pseudo-classes (active,
focus, hover) --which are not reserved for the links by the way.

If anything is the "right order" that can be to define first the link
classes then to add extra-properties with dynamic classes. The so-called
"right order" doesn't matter if you respect this rule and use:

a:visited:hover { ... }

So, for me, the "right order" is:

a:link
a:hover
a:focus /* Not a good idea IMHO to touch this one */
a:active
a:visited
a:visited:hover

It makes sense and it works.

Myth busted! ;-)

--
==================
Remi Villatel
maxilys_@_tele2.fr
==================
Oct 31 '05 #6

P: n/a
Els
Remi Villatel wrote:
a:focus /* Not a good idea IMHO to touch this one */


Why not?
When tabbing from link to link, it makes it much easier to see which
link is selected.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 31 '05 #7

P: n/a
VK

Remi Villatel wrote:
a:link
a:hover
a:focus /* Not a good idea IMHO to touch this one */
a:active
a:visited
a:visited:hover


Bingo!
That has at least some CSS-ruled sense.

"It's all legacy, man... legacy..."
(Changed quote from the "Platoon" movie)

Oct 31 '05 #8

P: n/a
Remi Villatel wrote:
VK wrote:
How about just putting them in the right order?
Like:
a:link
a:visited
a:focus
a:hover
a:active


What do you mean by "right order"? Alphabetically it should be active,
focus, hover, link, visited. Logically (from state to state)it should
be link, hover, focus, active, visited.

What's so right in the order you've indicated?

And why this sequence has effect on link color style priority?

I think it's a kind of urban legend. Someone tried to make all these
link styles work and find that this particular order works. Now, every
time you complain one of your link styles doesn't work as expected, the
only answer you get is to use the "right order".

According to the W3 docs, there's two kinds of link "styles": The link
pseudo-classes (link, visited) and the dynamic pseudo-classes (active,
focus, hover) --which are not reserved for the links by the way.

If anything is the "right order" that can be to define first the link
classes then to add extra-properties with dynamic classes. The so-called
"right order" doesn't matter if you respect this rule and use:

a:visited:hover { ... }

So, for me, the "right order" is:

a:link
a:hover
a:focus /* Not a good idea IMHO to touch this one */
a:active
a:visited
a:visited:hover

It makes sense and it works.

Myth busted! ;-)


http://meyerweb.com/eric/css/link-specificity.html

--
Gus
Oct 31 '05 #9

P: n/a
Els wrote:
a:focus /* Not a good idea IMHO to touch this one */
Why not?
When tabbing from link to link, it makes it much easier to see which
link is selected.


Yes but it's already defined at browser level and has some kind of
system consistancy: it's a dotted frame everywhere in the GUI. So, in
order not to fool the user, it's better to leave it this way. Unless the
standard focus becomes unusable, there's no valid reason to change it.
It's not meant to be pretty... if the purpose of CSS is to beautify
everything. ;-)

--
==================
Remi Villatel
maxilys_@_tele2.fr
==================
Nov 1 '05 #10

P: n/a
Remi Villatel wrote:
Els wrote:
a:focus /* Not a good idea IMHO to touch this one */
Why not?
When tabbing from link to link, it makes it much easier to see which
link is selected.


Yes but it's already defined at browser level and has some kind of
system consistancy: it's a dotted frame everywhere in the GUI.


Setting :focus rules doens't mean the focus outline (that dotted frame)
goes away.
It's not meant to be pretty...


It's meant to be useful. Keep in mind, too, that web page color schemes
rarely match the user's GUI. The focus outline can be very hard to see
on a lot of sites.

I usually set :focus and :hover the same. Then those who use keyboard
navigation get pretty much the same interactivity that mouse users do.

BTW, I'm a keyboard user, so I have some personal experience with this.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Nov 1 '05 #11

P: n/a
VK
Gus Richter wrote:
http://meyerweb.com/eric/css/link-specificity.html


In the programming you can either carefully arrange statements in
operator precedents:
var a = 1+2;
var b = a*3;
or simply use parenthesis to be the boss:
var b = (1+3)*3;

I consider !important statement as CSS equivalent to math parenthesis
and don't understand why only the first option (precedents slavery) is
explored.

But I never thought of myself as a CSS profi so I may be missing some
evident issues.

Nov 2 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.