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.

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.

Short URL: http://cssn.in/ja/043

Post filed under: css.

Skip to comment form.

  1. Josiah says:

    Here’s an interesting thing: on chrome you can chain together the same selector 255 times even on a single class element and override the id tag: http://codepen.io/anon/pen/cquBi

  2. Chris Coyier says:

    Also from the hacker news thread:

    WebKit source:

    69 case Id:
    70	s += 0x10000;
    73 case Class:
    88	s += 0x100;
    

    Mozilla source:

    521   nsAtomList* list = mIDList;
    522   while (nsnull != list) {
    523     weight += 0x010000;
    524     list = list->mNext;
    525   }
    526   list = mClassList;
    527   while (nsnull != list) {
    528     weight += 0x000100;
    529     list = list->mNext;
    530   }
    
  3. Baylor Rae' says:

    If you’re using 256 classes on a single element, I think overriding the CSS ID should be the least of your worries :)

    It’s a very interesting find though.

  4. spmbt says:

    Short example оf 256 classes

    #id {
      background: blue;
    }
    .c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c.c {
      background: red;
    }
    div {
      height: 100px;
      width: 100px
    }
    

    ​​
    Demo: http://codepen.io/anon/pen/yAbci

  5. Keith says:

    I wonder what lead to this test-case being crafted. Interesting, nonetheless!

  6. andi1984 says:

    Crazy thing! Thank’s for exploring this cutting edge case. ;-)

  7. Torkild says:

    This is so cool :)

  8. Smasty says:

    Using even 65536+ classes in Opera does not break. Demo: http://codepen.io/anon/pen/qxCoG

  9. Smasty says:

    Also, rendering of this is actually faster in Opera then in Firefox or Chrome (at least on my machine)

  10. megasteve4 says:

    I dread to think how this was discovered…….!!!! I really hope someone didn’t stumble across this while debugging why their 256 long class selector was failing to style an element – oh dear!

  11. bomazen says:

    well done thanks

  12. Jon says:

    Awesome discovery, but I’m just fine with it being filed as won’t fix because I can’t think of a real world solution.

    I was so baffled when I first saw this Codepen go around, thanks so much for explaining why it’s happening!

  13. Clark Pan says:

    I wanted to see if 256 ID selectors would override inline styles, so i wrote this.

    http://jsbin.com/igoqej/1/edit

    No, no it doesn’t.
    (Wierdly enough nothing renders in firefox at all when you get pass 200 levels in the dom tree)

  14. thanks for the wonderful post,

  15. CSSensei says:

    Let’s hope we will not end up having 256 / 65536 in the coming future :))

  16. Hello all,
    I am a noob, i don’t know much about css, i am learning css from online blogs, your blog is superb, i have a confusion could you please help, i created this test in which id override class http://codepen.io/anon/pen/fnDqC , In this Id override class.

  17. João Santos says:

    Jeetendra Singh it is giving id and class the same specificity so whichever appears last will override the other, like if you add 2 different rules for a id/class.

  18. Faust says:

    @Keith (et al): For the record, I discovered this implementation pattern about 5 days earlier, on Aug 12, 2012, and posted my answer to an old question on stackoverflow: http://stackoverflow.com/a/11934505/613004

    Up until that time, there had been many blog-posts explaining points in CSS specificity as being calculated with a base-10 points system. I had provided one such answer on stackoverflow, and Bolt-Clock (a moderator at the time) asserted that there is no real point system. I deleted that answer (since I had no backing for the base-10 assertion), and decided to investigate more deeply, given that so many were apparently *wrong*. I experimented with jsfiddle and discovered the base-256 pattern, and posted my answer to the canonical SO question on the topic. Others went on comment on my answer, which I used to refine it.

    It’s a little irking that the author of the demo posted on this blog-post copied my test code verbatim — didn’t even change the class-names or the color of the resulting CSS square — and presented as her/his own find. But then, it’s not like it’s copyrighted material.

  19. P says:

    I remember a similar issue in IE where you could only set a property 4096 times before it broke. No idea why that arbitrary limit existed.