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.

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.

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.


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.

[link href=”http://cssn.in/ja/043″]