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.

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:
    August 18, 2012 at 1:45 am

    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:
    August 18, 2012 at 3:02 am

    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:
    August 18, 2012 at 3:55 am

    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:
    August 18, 2012 at 4:20 am

    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:
    August 18, 2012 at 4:46 am

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

  6. andi1984 says:
    August 18, 2012 at 7:12 am

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

  7. Torkild says:
    August 18, 2012 at 9:47 am

    This is so cool :)

  8. Ryan Seddon says:
    August 18, 2012 at 5:13 pm

    @Chris –

    Thanks Chris!

  9. Smasty says:
    August 18, 2012 at 7:26 pm

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

  10. Smasty says:
    August 18, 2012 at 7:27 pm

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

  11. megasteve4 says:
    August 19, 2012 at 12:11 am

    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!

  12. bomazen says:
    August 19, 2012 at 10:39 am

    well done thanks

  13. Jon says:
    August 20, 2012 at 5:24 am

    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!

  14. Clark Pan says:
    August 21, 2012 at 5:41 pm

    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)

  15. Cozy Vision Technologies says:
    August 21, 2012 at 8:05 pm

    thanks for the wonderful post,

  16. CSSensei says:
    August 22, 2012 at 8:16 am

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

  17. Jeetendra Singh says:
    August 23, 2012 at 3:14 pm

    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.

  18. João Santos says:
    September 28, 2012 at 9:44 pm

    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.

Leave a comment