Stylesheets - a:visited priority : a bug or a feature

Author

a:visited priority : a bug or a feature

2005-10-30, 6:27 pm

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?

Els

2005-10-30, 6:27 pm

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 -

2005-10-30, 6:27 pm

Els 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?

Els

2005-10-30, 10:16 pm

VK wrote:
> Els wrote:
>
> 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 -

2005-10-30, 10:16 pm

Els wrote:
> VK wrote:
>
> The right order for the effect you want - which happens to be the
> effect most people want.
>
>
> 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.
>
>
> 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.
>
>
> Did you try it?
>
>
> 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* ;-)

Remi Villatel

2005-10-30, 10:16 pm

VK wrote:

[color=darkred]
[color=darkred]
> 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
==================

Els

2005-10-31, 3:22 am

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 -

2005-10-31, 6:22 am

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)

Gus Richter

2005-10-31, 6:44 pm

Remi Villatel wrote:
> VK wrote:
>
>
>
>
>
>
>
> 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