CSS specificity: Why isn't CSS specificity weight of 10 or more class selectors greater than 1 id selector?

Question

While going through the css specificity concept, I understood the fact that it is calculated as a 4 parts

1) inline (1000)
2) id     (100)
3) class   (10)
4) html elments (1)

CSS with the highest rule will be applied to the corresponding element.

I tried the following example

Created more than 10 classes

<div class="a1"> ....
     <div class="a13" id="id1"> TEXT COLOR
     </div> ... 
</div>

and the css as

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13 {
    color : red;
}
#id1 {
    color: blue;
}

Now, even though in this case there are 13 classes the weight is 130. Which is greater than the id.

Result -> JSFiddle CSS specificity

Answer 1

The idea that you add the numbers to get the specificity is actually wrong. The results of the calculation are the same most of the time, but you have found the edge case where it differs.

From the W3C CSS2 specification:

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

If you follow the example in that page, you find that the specificities of the rules are as follows:

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13    ||    0,0,13,0
#id1                                                       ||    0,1,0,0

Looking at the calculation this way, it is obvious that the ID selector wins. Indeed, one ID selector will override any number of class or element selectors. In turn, an inline definition will override ID style.

Answer 2

It's more like:

1) inline       (1.0.0.0)
2) id           (0.1.0.0)
3) class        (0.0.1.0)
4) html elments (0.0.0.1)

E.g. no matter how many class selectors you will provide, they will never go beyond the id.

According to your markup

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13 {
    color : red;
}
#id1 {
    color: blue;
}

corresponding weights are:

0.0.13.0 <-- for the classes
0.1.0.0 <-- for the ID