Extreme specificity overriding a CSS ID with 256 chained Classes

The other day Chris Coyier created a test case demonstrating that chaining together 256 classes will give it greater specificity than an id, in theory it shouldn’t. But in IE, Mozilla and WebKit browsers it does, Opera on the other hand upholds the specificity. Not familiar with CSS specificity then take a look at Estelle Weyl’s hilariously informative specifishity chart.

256 chained classes demo 256 nested tag selector overrides a class

Why does this work?

This got me curious as to why this is the case and thankfully a Mozillian, @heycam, pointed me to the source code of Firefox that shows classes are stored in 8bit strings and if you’re familiar with binary an 8bit string can only hold a maximum value of 255. You guessed it 256 tips this over the edge and overflows it into the ID count giving the classes higher specificity than the ID itself.

@ryanseddon From http://t.co/uta20DXD Gecko overflows the count of classes into the count of IDs, each of which holds 8 bits.

— Cameron McCormack (@heycam) August 16, 2012

What does Opera do differently?

According to an Opera employee, @patrick_h_lauke, they store specificity in 16bit strings, so you would need specify 65536 classes names to override an id and show the same behaviour other vendors do. I would be interested in know if using 16bit over 8bit actually impacts the selector engine.

@ryanseddon and to close the loop: yes, opera uses 16 bits instead of 8. bring on 65536 classes...

— patrick h. lauke (redux) "Big Dog" #toryScum (@patrick_h_lauke) August 16, 2012

mark: WONTFIX

While this is considered an implementation bug it won’t be fixed because it’s such a wildly ridiculous edge case. Another reason why is it could potentially slow down a browser selector engine speed and nobody wants that for crazy edges cases.

An interesting exercise that lets you dig into internals of how browsers work.