CSS nesting html elements limitation – ~~useless info

It appears that different browsers are limiting the number of nesting elements in an HTML page that a single CSS rule can use.
It looks like each browser has its very own different limitation.

While testing performance I tried to nest big amount of divs, 1000 of them. I gave each a following number (yeah, produced with javascript i++ and copied the result from the devtool), and tried to apply a single rule to it.

div .div998 { color: blue;}

It didn’t work. I tried to debug the HTML, thinking that I might have some problems with not closing elements or a wrong class, then began to change the class in the CSS rule to a higher container.I reached to the point from which the CSS won’t apply, the browser limitation.

Look at the following jsfiddler (looks like this is too heavy for embedding, so I removed the embedded code, please use the url).
Please leave a clean playground:


You can play with the class number to find your browser’s limitation.

With chrome (chrome OS version 41.0.2272.41) the limit is 509. With my Firefox 30 the limit is 198. If you change the rule to 510 or higher, you will see that the rule won’t apply. change it back to a lower class, and it will apply.

I am afraid to check IE’s limitation.

You can play with that on different browsers, there is no standard defined that I could find in the specs, and each browser has its very different limitation.

As its a bad use to have so many nested elements, it is still good to know, since lots of markup today is generated aoutomagically, by js or magic backend and sometimes we won’t notice that its so big, and try to understand, frustrating, why our style rules won’t work.