How are the points in CSS specificity calculated

Good question.

I can’t tell for sure – all the articles I manage to find avoid the example of multiple classes, e.g. here – but I assume that when it comes to comparing the specifity between a class selector and an ID, the class gets calculated with a value of 15 only, no matter how detailed it is.

That matches my experience in how specificity behaves.

However, there must be some stacking of classes because

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

is more specific than

.o

the only explanation I have is that the specificity of stacked classes is calculated only against each other but not against IDs.

Update: I half-way get it now. It is not a points system, and the information about classes weighing 15 points is incorrect. It is a 4-part numbering system very well explained here.

The starting point is 4 figures:

style  id   class element
0,     0,   0,    0

According to the W3C explanation on specificity, the specificty values for the abovementioned rules are:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

this is a numbering system with a very large (undefined?) base.

My understanding is that because the base is very large, no number in column 4 can beat a number > 0 in column 3, the same for column 2, column 1 …. Is this correct?

I’d be interested whether somebody with a better grasp at Math than me could explain th numbering system and how to convert it to decimal when the individual elements are larger than 9.

Leave a Comment