CSS specificity: 256 classes > id

First, the Demo. Admittedly, it doesn’t look that impressive: a red block. Heck, we can all do that quite easily.

The interesting bit is that the CSS rule for that element #id { background-color: blue; } is apparently just dismissed.

As explained by The CSS Ninja, this is achieved by chaining 256 (or more) CSS class selectors.

The number in question is a great hint as to what is going on: most browsers(*) hold the number of classes on each element in an 8-bit string, which overflows at 256. It’s like a Y2K Bug all over again 😉

You can even trigger this one by nesting 256 elements (and then writing a CSS selector traveling the chain) as demonstrated here.

(*): we have to say most because Opera, once again, stands tall(er) by storing the count of classes in a 16-bit string (giving it room till you give an element 65536 classes)

Image Credit: from Thomas Huot-Marchand’s 256tm.com


Tags: , ,

About FR

Software Craftsman

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s