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, I expect the following CSS and HTML to result in the text being 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 would equal 150 points compared to 1 ID which equals 100 points?

Apparently the points aren’t just totaled; they’re concatenated. Read more about that here - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Does that mean that the classes in our selector = 0,0,15,0 OR 0,1,5,0 ?