IE6-/Win: specificity problems with :visited pseudo-class

The page needs to be refreshed at least once, so that links to itself appear as visited.

a:visited { /* specificity [0,1,1] */
	color: #00f;
	background-color: #ff0;
}

blue color, yellow background on a:visited

The specificity of the rule is [0,1,1]

<p><a class="cl1" href="...">...</a></p>
p a.cl1 { /* specificity [0,1,2] */
	color: #f00;
	background-color: #0ff;
}

red color, aqua background, applied with a rule with specificity [0,1,2], greater then the first one.

In IE6- the first rule with specificity [0,1,1] is still applied, it is not overridden by the more specific [0,1,2] one (but without the pseudo-class :visited)

<p class="cl2"><a class="cl3" href="...">...</a></p>
.cl2 a.cl3 { /* specificity [0,2,1] */
	color: #f00;
	background-color: #0ff;
}

red color, aqua background, applied with a rule with specificity [0,2,1], greater then the first one [0,1,1]

Now even in IE6- the first rule is overriden.

<div><p><a href="...">...</a></p></div>
div p :visited { /* specificity [0,1,2] */
	color: #f00;
	background-color: #0ff;
}

red color, aqua background, applied with a rule with specificity [0,1,2], greater than the first one [0,1,1]

The first rule is correctly overridden, in IE6- as well. The applied rule has the same specificity [0,1,2] as in the second case, but now it includes the pseudo-class :visited and is able to override the first rule, which did not happen in the second case.

CSS tests home