Hacker News Reader

Comment by prezjordan | Hacker News Reader

I guess the algorithm for specificity in all modern browsers involves a base-256 number. Why? I believe there are 4 slots for specificity - class, id, !important, and styles defined in the tag. 256^4 = 2^32, the size of an integer. Unfortunately we get this is as a side effect.

View on HN

According to the CSS 2.1 spec, “Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.” Base-256 is the obvious way to encode each digit efficiently, and I suppose all browsers that do this are still in compliance with the spec.

It still works with > 256 classes. I was expecting it to overflow and go back to blue when I added a 257th class.

If it is adding numbers, it may be losing the ID altogether.

  spec = classes + (id>>8) + (important>>16) + (styles>>24);

If the assumption was that classes would "probably" be under 256 and wasn't put in a char, it could be messing with the whole value.

Can you override an !important with 256 nested ids?

Nope, although I did find once you hit a certain number of ID's, it was something over 1000, not sure of exact number, it just ignores the rule altogether.

1024?

Reply on news.ycombinator.com