You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.
This is a test to make sure that CSS Specificity is being calculated in an arbitrarily large base, rather than base 10.
The test line below is contained within 11 DIV elements, each of which has been assigned a class (a-k). The final DIV has also been given an id (z).
The rules applied are as follows:
DIV.a DIV.b DIV.c DIV.d DIV.e DIV.f DIV.g DIV.h DIV.i DIV.j DIV.k { color: red; }
#z { color: green; }
The first rule has a specificity of 11 elements, 11 classes and 0 ids, which is (0)(11)(11) or 0AA in a base larger than 10.
The second rule has 0 elements and 0 classes, but 1 id, so the specificity of that is (1)(0)(0), or 100.
Since 100 is greater than 0AA, the test line below should have the second rule applied to it, and thus should be green.
If a browser incorrectly takes the base of specificity to be base 10, then it might add up 11, 110 and 0 for the first rule, giving an overall specificity of 121, which it might then take as being greater than the id's specificity (100), thus making the line red. This is incorrect behaviour.