default a:hover overriding ones with classes ie6

Question

I have a default a:hover style as follows:

a:hover { color: black; font-size: 8pt }

However when trying to apply a class such as:

a.myclass:link { font-size: 14px } 
a.myclass:hover { color: red }

without the font-size, then it changes font-size back to 8pt. Now this seems like how it should work however it doesn't happen in ie7, firefox, chrome. (It does work in IE6)

Update: In firebug it actually shows font-size on a:hover has been overridden, but by what i don't know.

Any one have any ideas?

Answer 1

thats because of the way the styles are being applied if you would expand the classes you would get:

a{ color:red; font-size:10pt;}
a:hover {font-size:8pt; color:black}
a.myclass{font-size:6pt;text-decoration:none;}
a.myclass:hover {color:red}

now if we expand this to show whats going on:

a.myclass{font-size:6pt;text-decoration:none;**color:red**} /* got the color from a - we overrode the font size */
a.myclass:hover {color:red;text-decoration:none;font-size:8pt} /* we got the text-decoration from a.myclass - but a:hover overrides myclass so we got the 8pt from there */

this effect is actually even weirder and more complicated if you start mixing all around effects (border/padding/margin) and side only ones (border-right;margin-top;padding-left) in such constellations.

Answer 2

I believe it's because a:hover is more specific than a:link.

If the original a:hover font-size was unspecified, it would be inherited from a:link. But since there is an a:hover specification, a.myclass:hover rather takes this value than the more "general" a.myclass:link.

I read somewhere to think of the a pseudo-classes as "love hate": :link, :visited, :hover, :active, one more specific than the previous. If you define something for a or :link, it should be inherited by all the following pseudo-classes. That value can be overridden though, and the specificity of the pseudo-class is more important than the order in which the styles are defined or what other "real" classes are attached to the link.

The reason it works differently in IE6 is that IE6 does it wrong, which shouldn't come as a surprise.

Differences in parsing (possibly backwards):

a:hover { font-size: 8pt }
a.myclass:link { font-size: 14px } 
a.myclass:hover { }

How it should be:

Every :hover, regardless of .class, is 8pt.

How IE6 understands it:

:hover is not in the same class as .myclass:hover. Since there's no size specified for .myclass:hover, let's inherit from the next higher available pseudo-class in the same class, which is .myclass:link. That makes .myclass:hover 14px.

Estimated lookup priorities:

Others            IE6

a                 a
a.class           a:link
a:link            a:hover
a.class:link      a.class
a:hover           a.class:link
a.class:hover     a.class:hover   <-- Lookup starts here, goes up.