2

I came across this issue when testing a stylesheet across different browsers, including IE6 (yes, I know..)

<head>
<style>
  a:link, a:visited, a:hover, a:active { font-weight: bold; color: #000; text-decoration: underline }
  .myclass a { color: red; text-decoration: none; }
</style>
</head>
<body>
<p>This is a <a href="1">test</a></p>
<div class="myclass">
<p>This is a <a href="2">test</a></p>
</div>
</body>

Results:

  • In IE6, the .myclass a rule only applies to the unvisited link state
  • In other browsers (FF, Chrome), the .myclass a rule applies to all link states

I believe that IE6 is wrong and that .myclass a, with no pseudo-classes specified, should apply to all link states. However I came across this SO question where it says that a is equivalent to a:link. This would match the behaviour in IE6. However I cannot find any official reference confirming this.

Which one is right?

Update:

As noted in the comments, the accepted answer to the question referenced above has since been updated.

Community
  • 1
  • 1
Grodriguez
  • 21,501
  • 10
  • 63
  • 107
  • The first thing I thought is that IE6 was getting it wrong. However I got confused by that statement in both the question and the accepted answer, and also by the fact that after some googling I could not find any reference or mention of such a bug anywhere (whereas most IE6 bugs tend to be quite well known by now and it is often easy to find information about them...) – Grodriguez Feb 20 '12 at 20:00
  • The accepted answer to that question has since been updated. – BoltClock Feb 22 '12 at 19:17
  • Updated the text of the question as well to clarify. – Grodriguez Feb 23 '12 at 15:36

2 Answers2

3

The other browsers are right; IE6 is wrong.

The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.

Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.

By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:

<div class="myclass">
<p>This is a <a href="2">test</a></p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    This is how I would interpret it based on what is stated here: http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes – jmbertucci Feb 20 '12 at 20:13
-1

IE6 is right. Not specifying a pseudo-class on a is the same as :link. Therefore you must specify styles for :link and :visited if you want something specific - :hover and :active are optional.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592