How is CSS specificity calculated?

Question

While researching specificity, I stumbled across this blog - http://www.htmldog.com/guides/cssadvanced/specificity/

It states that specificity is a scoring system for CSS. It tells us that the element value is 1 point, the class value is 10 points, and the ID value is 100 points. It goes on to say that these scores are added up and the total score is the selector's specificity.

For example:

body = 1 point

body .wrapper = 11 points

body .wrapper #container = 111 points

So, using these scores, I would expect the following CSS and HTML to cause the text to turn blue:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Why is the text red when 15 classes equal 150 points and 1 ID equals 100 points?

Obviously, these scores don't just add up; they are connected. Find out more here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Does this mean that the class in our selector = 0,0,15,0 or 0,1,5,0?

(My intuition tells me it should be the former, because we know that the specificity of the ID selector is like this: 0,1,0,0)

Answer 1

good question.

I'm not sure - all the articles I've found avoid examples of multiple classes, such as here - but I'm assuming that when it comes to comparison specificity between class selectors and IDs, the class will only be evaluated to a value of 15, no matter how detailed it is.

This is consistent with my experience with specific sexual behaviors.

However, musthave some stacking of classes because

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

Compare

.o

To be more specific, my only explanation is that the specificity of stacked classes is only calculated against each other, not against the ID.

UPDATE: I kind of understand now. This is not a points system and the information about class weights being 15 points is incorrect. This is a very well explained 4 part numbering system which can be found here.

The starting point is 4 numbers:

style  id   class element
0,     0,   0,    0

According to W3C’s explanation of specificity, the specificity value of the above rules is:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ...请参见评论

This is a numbering system with a very large (undefined?) base.

My understanding is that since the base is very large, any number in column 4 cannot beat the number greater than 0 in column 3, the same is true for column 2, and the same is true for column 1.... This understanding is correct ?

I was wondering if anyone with a better understanding of math could explain this numbering system and how to convert it to decimal when the individual elements are greater than 9.

Answer 2

Pekka's answer is actually correct and probably the best way to think about this question.

However, as many have already pointed out, the W3C CSS Recommendation states: "Concatenating the three numbers a-b-c (in a large-base number system) gives specificity." So the geek in me You must figure out how big this base is.

It turns out that the "very large base" (by at least the 4 most commonly used browsers^*) that implements this standard algorithm is 256 or 2⁸.

This means that a style specified with 0 ids and 256 class names will override a style specified with only 1 id. I tested it with some fiddles:

• 255 class names are not enough to cover 1 id

• ...But 256 class names are enough to cover 1 id

• ...and 256 tag names are enough to cover 1 class name

• ...but, unfortunately 256 ids are not enough to cover 1 inline style (updated on 2012/8/15 -- you will need to use !important )

Therefore, there is actually a "point system", but it is not based on base 10, but on base 256. Here's how it works:

(2⁸)² or 65536, multiplied by the number of ids in the selector

• (2⁸)¹ or 256, multiplied by the number of class names in the selector
• (2⁸)⁰ or 1, multiplied by the number of tag names in the selector

This is not very practical for simple concept communication.
This is probably why articles on this topic have always used base-10 based systems.

***** [Opera uses 2¹⁶ (see karlcow's comment). Some other selector engines use infinity - there is actually no point system (see Simon Sapin's comment). ]

Updated, July 2014:
As Blazemonger pointed out earlier this year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Maybe 2¹⁶, like Opera? IE and Firefox still use 256.

Updated, March 2021:
Firefox no longer uses 256 as a base.