Does style declarations order matter?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Claude Schneegans - 27 Jan 2006 20:33 GMT

Hi,

Is it specified somewhere in the docs that pseudo styles
for links should be given in any specific order, and why?
In the code below, the link in the blue paragraph becomes red when the mouse passes over, but the A:hover spec is simply ignored if it is not the last one.

<html>
<head>
<title>Untitled</title>
<STYLE>
P.blue {color:blue}
P.blue A:link {color:green}
P.blue A:visited {color:green}
P.blue A:hover {color:red}
</STYLE>
</head>

<body>
<P>Paragraph with a <A HREF="#">link</A></P>
<P CLASS="blue">Blue Paragraph with a <A HREF="#">link</A></P>
</body>
</html>

Reply to this Message

Els - 27 Jan 2006 20:44 GMT

> Hi,
>
> Is it specified somewhere in the docs that pseudo styles
> for links should be given in any specific order, and why?
> In the code below, the link in the blue paragraph becomes red when the mouse passes over, but the A:hover spec is simply ignored if it is not the last one.

[snip code]

That's because the cascading of the styles.
The last one overrules the earlier ones.

Signature

Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Caravan - With An Ear To The Ground You Can Make Tt /
Martinian / Only Cox / Reprise

Reply to this Message

Alan J. Flavell - 27 Jan 2006 21:02 GMT

> Is it specified somewhere in the docs that pseudo styles for links
> should be given in any specific order,

Not directly, but it's usually explained in tutorials.

> and why?

Application of logic to the rules set out in the specifications :-}

> In the code below, the link in the blue paragraph becomes red when
> the mouse passes over, but the A:hover spec is simply ignored if it
> is not the last one.

For selectors from the same source and of equal specificity, the last
takes priority. Something like that, anyway - don't ever believe what
Usenet tells you - treat it as potentially misleading clues, verify it
at the source. In this case the CSS spec cascading rules.

What the usual tutorials omit to mention is that selectors like
a:hover *will* select <a name="foo">bar</a>, which probably isn't what
you'd intend.

One hunch is that those who wrote the tutorials had only used MSIE,
which doesn't implement :hover to specification. Or maybe they
thought that use of <a name=...> had already been phased out, and
nobody had any legacy documents to which they were applying CSS. OK,
maybe you're in that lucky situation; but some of us have been doing
HTML since 1994-ish, and doing CSS since its early drafts (thanks to
the Arena browser), and have all kinds of legacy stuff to take into
account.

I do think the tutorials might mention a:link:hover (and optionally
a:visited:hover) as being more robust ways of selecting links without
accidentally affecting also anchors. You might want to style :active
too, and possibly even :focus, by the way.

There's a crazy mnemonic, "Las Vegas Forest Has Animals", to remember
an appropriate sequence for them. But that's not set in stone: it
rather depends on what you want to happen in the various scenarios.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2006

Does style declarations order matter?