Points in CSS specificity

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 CSS. It tells us that elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points. It also goes on top say that these points are totaled and the overall amount is that selector's specificity.

For example:

body = 1 point
body .wrapper = 11 points
body .wrapper #container = 111 points

So, using these points surely the following CSS and HTML will result in the text being blue:

CSS:

#a {
    color: red;
}

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

HTML:

<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>

RESULT:

http://jsfiddle.net/hkqCF/

Why is the text red when 15 classes would equal 150 points compared to 1 ID which equals 100 points?

EDIT:

So apparently the points aren’t just totalled, they’re concatenated. Read more about that here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html BUT, does that mean that the classes in our selector = 0,0,15,0 OR0,1,5,0?

My instincts tell me it’s the former as we KNOW the ID selector’s specificity looks like this: 0,1,0,0

Answer 1

Good question.

I can't tell for sure - all the articles I manage to find avoid the example of multiple classes, e.g. here - but I assume that when it comes to comparing the specifity between a class selector and an ID, the class gets calculated with a value of 15 only, no matter how detailed it is.

That matches my experience in how specificity behaves.

However, there must be some stacking of classes because

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

is more specific than

.o

the only explanation I have is that the specificity of stacked classes is calculated only against each other but not against IDs.

Update: I half-way get it now. It is not a points system, and the information about classes weighing 15 points is incorrect. It is a 4-part numbering system very well explained here.

The starting point is 4 figures:

style  id   class element
0,     0,   0,    0

According to the W3C explanation on specificity, the specificty values for the abovementioned rules are:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

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

My understanding is that because the base is very large, no number in column 4 can beat a number > 0 in column 3, the same for column 2, column 1 .... Is this correct?

I'd be interested whether somebody with a better grasp at Math than me could explain th numbering system and how to convert it to decimal when the individual elements are larger than 9.

See also: Specificity calculator

Answer 2

I would say that:

Element < Class < ID

I think they only stack into depending what you get if it is multiple of the same. So a Class will always overide the element and ID always over the Class but if it is down to which of 4 elements where 3 is to blue and 1 is to red it will be blue.

For Example:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

Should turn out red.

See Example http://jsfiddle.net/RWFWq/

"if 5things say red and 3 say blue well Ima go red"

Answer 3

I don't believe that the blog's explanation is correct. The specification is here:

http://www.w3.org/TR/CSS2/cascade.html#specificity

"Points" from a class selector can't add up to be more important than an "id" selector. It just doesn't work like that.