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