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

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

blue color, yellow background. On hover the color are reversed

The normal rules have specificity [0,0,1], the hover ones [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 ones.

In IE6- the "normal" (not hover) values are overriden, but not the "hover" ones. In other words, the hover 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 :hover)

<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 ones.

Now in IE6- both the "normal" and the "hover" values are overriden, the specificity [0,2,1] correctly overrides [0,1,1].

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

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

The first :hover 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 :hover and is able to override the first hover rule, which did not happen in the second case.

CSS tests home