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?
