CSS Specificity is Base-Infinite

There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has long since been fixed, but the mistake is still interesting.

The original article showed specificity as an integer, so a selector like #main article.news p:first-child would have been listed as 0122 for the 1 ID, 2 classes, and 2 elements. The mistake? That makes it seem like a base-10 system. Say the specificity value was 0129 – if it was a base-10 system, adding one more element selector would make that 0130 which is definitely not what happens.

Jonathan Snook originally corrected me:

… if you had an element with 11 classes applied to it, it would not outrank an element with a single ID selector.

And Eric Meyer corroborated:

Specificity is not base-10. It’s not base-anything-familiar: in fact, specificity values have an infinite base.

(You can even find a broodling Harry Roberts in that comment thread!)

The trick with writing about specificity is to use commas so it doesn’t look like a single number. 0122 is better served as 0, 1, 2, 2. The diagrams in subsequent updated posts were better:

The first digit represents whether an element has an inline style or not, so that’s really just a 0 or a 1, but the rest are theoretically infinite. I guess it would be like this:

[0 or 1], ∞, ∞, ∞

A number in a higher column can beat any number below. 0, 1, 0, 0 beats 0, 0, 312, 54659392. That right there is why it’s so popular to just never use ID’s and keep specificity flat.