Points in CSS specificity

Posted by Sam on Stack Overflow See other posts from Stack Overflow or by Sam
Published on 2010-05-11T08:17:20Z Indexed on 2010/05/11 8:24 UTC
Read the original article Hit count: 293

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about css

Related posts about specificity