How are the points in CSS specificity calculated

Question

Researching specificity I stumbled upon this blog - http://www.htmldog.com/guides/cssadvanced/specificity/

It states that specificity is a point-scoring system for

Answer 1

I am currently using the book CSS Mastery: Advanced Web Standards Solutions.

Chapter 1, page 16 says:

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors. Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors.

(emphasis mine) and

The specificity of a selector is broken down into four constituent levels: a, b, c, and d.

• if the style is an inline style, then a = 1
• b = the total number of id selectors
• c = the number of class, pseudo-class, and attribute selectors
• d = the number of type selectors and pseudo-element selectors

It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.

---

In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.