What is the rule behind "CSS 256 Classes Override One ID"?
css
Solution
This happens due to a browser limitation, and not a mistake in the spec or how browsers implement it.
The spec says:
A selector's specificity is calculated as follows:
- count the number of ID selectors in the selector (= a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
- count the number of type selectors and pseudo-elements in the selector (= c)
- ignore the universal selector
Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Browsers have to store specificity values as integers for the purposes of calculation, and somehow a value of 256 causes an overflow depending on the browser. This usually happens with an 8-bit unsigned integer, whose max value is 255; adding one more causes the class-level specificity to somehow be "upgraded" into an ID-level value, making it equal to the ID in the cascade and thereby overriding it.
Problem
I have came through this situation recently but unable to find 'Why'? Can anyone explain? See the example below at: http://codepen.io/chriscoyier/pen/lzjqh