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?
(my instincts tell me it’s the former, as we KNOW the ID selector’s specificity looks like this: 0,1,0,0)
Pekka's answer is practically correct, and probably the best way to think about the issue.
However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.
It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers*) to implement this standard algorithm is 256 or 28.
What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:
255 classes are not enough to override 1 id
...but 256 classes are enough to override 1 id
...and 256 tag-names are enough to override 1 class-name
...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)
So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:
(28)2 or 65536, times the number of ids in the selector
(28)1 or 256, times the number of class-names in the selector
(28)0 or 1, times the number of tag-names in the selector
This isn't very practical for back-of-the-envelop exercises to communicate the concept.
That's probably why articles on the topic have been using base 10.
***** [Opera uses 216 (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]
Update, July 2014:
As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 216, like Opera? IE and Firefox still use 256.
Update, March 2021:
Firefox no longer uses 256 as a base.
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.
The current Selectors Level 4 Working Draft does a good job of describing Specificity in CSS:
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger c value is more specific; if all the values are tied, the two specifities are equal.
This means that the values A, B and C are completely independent of each other.
15 classes doesn't give your selector a specificity score of 150, it gives it a B value of 15. A single A value is enough to overpower this.
As a metaphor, imagine a family of 1 grand parent, 1 parent and 1 child. This could be represented as 1,1,1. If the parent has 15 children, that doesn't suddenly make them another parent (1,2,0). It means that the parent has an awful lot more responsibility than they had with just 1 child (1,1,15). ;)
The same documentation also goes on to say:
Due to storage limitations, implementations may have limitations on the size of A, B, or c. If so, values higher than the limit must be clamped to that limit, and not overflow.
This has been added to tackle the problem presented in Faust's answer, whereby CSS implementations back in 2012 allowed specificity values to overflow into each other.
Back in 2012, most browsers implemented a limitation of 255, but this limitation was allowed to overflow. 255 classes had an A,B,c specificity score of 0,255,0, but 256 classes overflowed and had an A,B,c score of 1,0,0. Suddenly our B value became our A value. The Selectors Level 4 documentation completely irradiates that problem by stating that the limit can never be allowed to overflow. With this implementation, both 255 and 256 classes would have the same A,B,c score of 0,255,0.
The problem given in Faust's answer has since been fixed in most modern browsers.
I am currently using the book CSS Mastery: Advanced Web Standards Solutions.
Chapter 1, page 16 says:
To calculate how specific a rule is, each type of selector is assigned
a numeric value. The specificity of a rule is then calculated by
adding up the value of each of its selectors. Unfortunately,
specificity is not calculated in base 10 but a high, unspecified, base
number. This is to ensure that a highly specific selector, such as an
ID selector, is never overridden by lots of less specific selectors,
such as type selectors.
(emphasis mine) and
The specificity of a selector is broken down into four constituent
levels: a, b, c, and d.
if the style is an inline style, then a = 1
b = the total number of id selectors
c = the number of class, pseudo-class, and attribute selectors
d = the number of type selectors and pseudo-element selectors
It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.
In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.
I am fond of comparison of Specificity ranking to Olympic Games medal table (gold first method — based first on the number of gold medals, then silver and then bronze).
It works also with your question (huge number of selectors in one specificity group). Specificity considered each group separately. In real world I've very rarely seen case with more than a dozen selectors).
There is also quite good specificity calculator available here. You can put your example (#a and .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) there and see the results.
Example of Rio 2016 Olympic Games medal table looks like
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.
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"
Related
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?
(my instincts tell me it’s the former, as we KNOW the ID selector’s specificity looks like this: 0,1,0,0)
Pekka's answer is practically correct, and probably the best way to think about the issue.
However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.
It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers*) to implement this standard algorithm is 256 or 28.
What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:
255 classes are not enough to override 1 id
...but 256 classes are enough to override 1 id
...and 256 tag-names are enough to override 1 class-name
...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)
So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:
(28)2 or 65536, times the number of ids in the selector
(28)1 or 256, times the number of class-names in the selector
(28)0 or 1, times the number of tag-names in the selector
This isn't very practical for back-of-the-envelop exercises to communicate the concept.
That's probably why articles on the topic have been using base 10.
***** [Opera uses 216 (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]
Update, July 2014:
As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 216, like Opera? IE and Firefox still use 256.
Update, March 2021:
Firefox no longer uses 256 as a base.
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.
The current Selectors Level 4 Working Draft does a good job of describing Specificity in CSS:
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger c value is more specific; if all the values are tied, the two specifities are equal.
This means that the values A, B and C are completely independent of each other.
15 classes doesn't give your selector a specificity score of 150, it gives it a B value of 15. A single A value is enough to overpower this.
As a metaphor, imagine a family of 1 grand parent, 1 parent and 1 child. This could be represented as 1,1,1. If the parent has 15 children, that doesn't suddenly make them another parent (1,2,0). It means that the parent has an awful lot more responsibility than they had with just 1 child (1,1,15). ;)
The same documentation also goes on to say:
Due to storage limitations, implementations may have limitations on the size of A, B, or c. If so, values higher than the limit must be clamped to that limit, and not overflow.
This has been added to tackle the problem presented in Faust's answer, whereby CSS implementations back in 2012 allowed specificity values to overflow into each other.
Back in 2012, most browsers implemented a limitation of 255, but this limitation was allowed to overflow. 255 classes had an A,B,c specificity score of 0,255,0, but 256 classes overflowed and had an A,B,c score of 1,0,0. Suddenly our B value became our A value. The Selectors Level 4 documentation completely irradiates that problem by stating that the limit can never be allowed to overflow. With this implementation, both 255 and 256 classes would have the same A,B,c score of 0,255,0.
The problem given in Faust's answer has since been fixed in most modern browsers.
I am currently using the book CSS Mastery: Advanced Web Standards Solutions.
Chapter 1, page 16 says:
To calculate how specific a rule is, each type of selector is assigned
a numeric value. The specificity of a rule is then calculated by
adding up the value of each of its selectors. Unfortunately,
specificity is not calculated in base 10 but a high, unspecified, base
number. This is to ensure that a highly specific selector, such as an
ID selector, is never overridden by lots of less specific selectors,
such as type selectors.
(emphasis mine) and
The specificity of a selector is broken down into four constituent
levels: a, b, c, and d.
if the style is an inline style, then a = 1
b = the total number of id selectors
c = the number of class, pseudo-class, and attribute selectors
d = the number of type selectors and pseudo-element selectors
It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.
In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.
I am fond of comparison of Specificity ranking to Olympic Games medal table (gold first method — based first on the number of gold medals, then silver and then bronze).
It works also with your question (huge number of selectors in one specificity group). Specificity considered each group separately. In real world I've very rarely seen case with more than a dozen selectors).
There is also quite good specificity calculator available here. You can put your example (#a and .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) there and see the results.
Example of Rio 2016 Olympic Games medal table looks like
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.
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"
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?
(my instincts tell me it’s the former, as we KNOW the ID selector’s specificity looks like this: 0,1,0,0)
Pekka's answer is practically correct, and probably the best way to think about the issue.
However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.
It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers*) to implement this standard algorithm is 256 or 28.
What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:
255 classes are not enough to override 1 id
...but 256 classes are enough to override 1 id
...and 256 tag-names are enough to override 1 class-name
...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)
So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:
(28)2 or 65536, times the number of ids in the selector
(28)1 or 256, times the number of class-names in the selector
(28)0 or 1, times the number of tag-names in the selector
This isn't very practical for back-of-the-envelop exercises to communicate the concept.
That's probably why articles on the topic have been using base 10.
***** [Opera uses 216 (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]
Update, July 2014:
As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 216, like Opera? IE and Firefox still use 256.
Update, March 2021:
Firefox no longer uses 256 as a base.
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.
The current Selectors Level 4 Working Draft does a good job of describing Specificity in CSS:
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger c value is more specific; if all the values are tied, the two specifities are equal.
This means that the values A, B and C are completely independent of each other.
15 classes doesn't give your selector a specificity score of 150, it gives it a B value of 15. A single A value is enough to overpower this.
As a metaphor, imagine a family of 1 grand parent, 1 parent and 1 child. This could be represented as 1,1,1. If the parent has 15 children, that doesn't suddenly make them another parent (1,2,0). It means that the parent has an awful lot more responsibility than they had with just 1 child (1,1,15). ;)
The same documentation also goes on to say:
Due to storage limitations, implementations may have limitations on the size of A, B, or c. If so, values higher than the limit must be clamped to that limit, and not overflow.
This has been added to tackle the problem presented in Faust's answer, whereby CSS implementations back in 2012 allowed specificity values to overflow into each other.
Back in 2012, most browsers implemented a limitation of 255, but this limitation was allowed to overflow. 255 classes had an A,B,c specificity score of 0,255,0, but 256 classes overflowed and had an A,B,c score of 1,0,0. Suddenly our B value became our A value. The Selectors Level 4 documentation completely irradiates that problem by stating that the limit can never be allowed to overflow. With this implementation, both 255 and 256 classes would have the same A,B,c score of 0,255,0.
The problem given in Faust's answer has since been fixed in most modern browsers.
I am currently using the book CSS Mastery: Advanced Web Standards Solutions.
Chapter 1, page 16 says:
To calculate how specific a rule is, each type of selector is assigned
a numeric value. The specificity of a rule is then calculated by
adding up the value of each of its selectors. Unfortunately,
specificity is not calculated in base 10 but a high, unspecified, base
number. This is to ensure that a highly specific selector, such as an
ID selector, is never overridden by lots of less specific selectors,
such as type selectors.
(emphasis mine) and
The specificity of a selector is broken down into four constituent
levels: a, b, c, and d.
if the style is an inline style, then a = 1
b = the total number of id selectors
c = the number of class, pseudo-class, and attribute selectors
d = the number of type selectors and pseudo-element selectors
It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.
In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.
I am fond of comparison of Specificity ranking to Olympic Games medal table (gold first method — based first on the number of gold medals, then silver and then bronze).
It works also with your question (huge number of selectors in one specificity group). Specificity considered each group separately. In real world I've very rarely seen case with more than a dozen selectors).
There is also quite good specificity calculator available here. You can put your example (#a and .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) there and see the results.
Example of Rio 2016 Olympic Games medal table looks like
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.
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"
When looking into yet another question about a class name starting with a digit that didn't work as expected, the thought suddenly hit me that I don't know what goes wrong.
Here's a simple example:
.123 {color:blue;}
<div class="123">This is something 123</div>
This doesn't make the output blue.
And the reason is: .123 is not a valid CSS selector, because it looks like a number.
Yeah, but, why? Why would a CSS parser be looking for numbers in a selector? Is there actually a reason for selectors to contain numbers? Can anybody provide an example of such a selector?
Edit: As per the comments, arguments inside parentheses and brackets can be numbers; for example nth-child(2) or [colspan=2], so my question is about numbers outside of those.
The simplest answer is probably, that the CSS Selector Spec doesn't allow it and (most) browsers seem to honor this, even though it was probably technically possible to allow leading numbers (or hyphens):
https://www.w3.org/TR/css3-selectors/#lex
A very simplified explanation: A Selector consists of an (optional) type selector (e.g. # for ids, . for classes) a "nmstart" and optional "nmchar" parts. The "nmstart" part doesn't allow numbers, while the "nmchar" part does:
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
As MattDiMu has already pointed out in their answer, the place to find out how selectors should be validated is within section 10 of the CSS Selectors specification: The grammar of Selectors, which itself is a clone of the CSS2.2 specification's Grammar section with a few bits ommitted.
It's in the CSS2.2 specification that we're told why numbers are not valid at the start of CSS selectors:
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")
So in short, it's to avoid confusion. .1px is a valid unit which could easily be mistaken for a class of "1px", however we can use numbers at the start of a selector like this if we escape it. In the below example, I'm able to target the div element whose class is "1px" by escaping the 1 within the class selector (as .\31 px):
.\31 px {
color: red;
}
<div class="1px">Hello, world!</div>
For people who are still interested in this subject, I found one situation where selectors can look like numbers, indeed, where selectors are numbers. That is inside a #keyframes at-rule.
Example:
#keyframes anim {
.6% {color:white;}
100% {color:red;}
}
They really are percentages (they won't work without the % sign), but they start with a digit or even a period and a digit, so these are actual examples of selectors that could confuse parsers if .6% for class "6%" would be allowed.
I am curious about nth child selector in css. But is hard to understand its logic for me now. Below given example highlight first and the last span.
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
<em>This one is odd. </em>
<span>Sadly, this one is not...</span>
<span>But this one is!</span>
</div>
span:nth-child(2n+1) {
background-color: green;
}
n represents a natural number. Meaning, [0, 1, 2, 3, 4, 5, ...]
In your CSS, 2n+1 thus means:
2*0+1 (= 1), 2*1+1 (= 3), 2*2+1 (= 5), 2*3+1 (= 7) and so on.
Your code basically selects all the odd children. Which could be written much shorter, namely:
nth-child(odd)
For first and last you can use the span:first-child and span:last-child selectors.
Regarding the nth-child, it is just repetitive selection of elemetns.
span:nth-child(2n+1) in example will select 1, 3, 5 etc... all the odd spans.
In your specific example, it is selecting the odd elements as seen in the table below. Why is it counting the <em>? That's because as the name suggests, it is searching for a child of the parent <div> and in this case the <em> is the 3rd child of the parent but because it is not a <span> it is not highlighted.
:nth-child can use formulas, numbers, or certain keywords to select certain elements where n is the index an object has. Simply put, it's a very nice trick to have custom CSS options that follow a specific order or design without the need for having special classes and having to take into account when building HTML.
i.e. You wouldn't want to have have a special CSS classes for odd and even members when you can just use the :nth-child selector. Imagine if you're writing a table and color ever other line, if you have CSS classes, it will troublesome to add something to the middle of the table and change the CSS classes for the rows after to follow the odd/even pattern.
Keywords
:nth-child(odd)
:nth-child(even)
Example Formulas (w/ an awesome ASCII table)
As a description, the following table tells you the nth element that will be selected. For example, when you use the formula 2n+1 the 1st, 3rd, 5th, 7th, 9th, 11th, ... elements will be selected.
n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 - - 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 -
4 9 17 20 16 18 -
5 11 21 24 20 23 -
Resources
:nth-child in-depth
Useful :nth-child Recipes
A nice visual tester
Quoting from W3C
The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element. For
values of a and b greater than zero, this effectively divides the
element's children into groups of a elements (the last group taking
the remainder), and selecting the bth element of each group. For
example, this allows the selectors to address every other row in a
table, and could be used to alternate the color of paragraph text in a
cycle of four. The a and b values must be integers (positive,
negative, or zero). The index of the first child of an element is 1.
So, now what's the meaning of span:nth-child(2n+1) will represent every odd number of element, simple explanation, add 2 to every 1, so if the equation is like (3n+2) so it will be like 2, 5, 8 etc.. where 2n+0 OR just 2n will represent even...
Demo (Odd) span:nth-child(2n+1)
Demo 2 (Even) span:nth-child(2n+0) OR span:nth-child(2n)
We also have a pseudo, which is nth-of-type which is nothing but same thing in general, but you can take it as a stricter selector, nth-child will select ANY TYPE OF ELEMENT where as nth-of-type will select THAT PARTICULAR ELEMENT.
So, say you want to target 2nd span element, but your 2nd element in the DOM is not span but p, so the selector will simply fail if you use nth-child
Demo
Where as using nth-of-type will select your 2nd span and will just skip off the p
Demo 2
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?
(my instincts tell me it’s the former, as we KNOW the ID selector’s specificity looks like this: 0,1,0,0)
Pekka's answer is practically correct, and probably the best way to think about the issue.
However, as many have already pointed out, the W3C CSS recommendation states that "Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity." So the geek in me just had to figure out just how large this base is.
It turns out that the "very large base" employed (at least by the 4 most commonly-used browsers*) to implement this standard algorithm is 256 or 28.
What this means is that a style specified with 0 ids and 256 class-names will over-ride a style specified with just 1 id. I tested this out with some fiddles:
255 classes are not enough to override 1 id
...but 256 classes are enough to override 1 id
...and 256 tag-names are enough to override 1 class-name
...but, alas 256 ids are not enough to override 1 inline style (Updated 2012/8/15 -- you'll have to use !important)
So there is, effectively, a "point system," but it's not base 10. It's base 256. Here's how it works:
(28)2 or 65536, times the number of ids in the selector
(28)1 or 256, times the number of class-names in the selector
(28)0 or 1, times the number of tag-names in the selector
This isn't very practical for back-of-the-envelop exercises to communicate the concept.
That's probably why articles on the topic have been using base 10.
***** [Opera uses 216 (see karlcow’s comment). Some other selector engines use infinity — effectively no points system (see Simon Sapin’s comment).]
Update, July 2014:
As Blazemonger pointed out earlier in the year, webkit browsers (Chrome, Safari) now appear to use a higher base than 256. Perhaps 216, like Opera? IE and Firefox still use 256.
Update, March 2021:
Firefox no longer uses 256 as a base.
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.
The current Selectors Level 4 Working Draft does a good job of describing Specificity in CSS:
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger c value is more specific; if all the values are tied, the two specifities are equal.
This means that the values A, B and C are completely independent of each other.
15 classes doesn't give your selector a specificity score of 150, it gives it a B value of 15. A single A value is enough to overpower this.
As a metaphor, imagine a family of 1 grand parent, 1 parent and 1 child. This could be represented as 1,1,1. If the parent has 15 children, that doesn't suddenly make them another parent (1,2,0). It means that the parent has an awful lot more responsibility than they had with just 1 child (1,1,15). ;)
The same documentation also goes on to say:
Due to storage limitations, implementations may have limitations on the size of A, B, or c. If so, values higher than the limit must be clamped to that limit, and not overflow.
This has been added to tackle the problem presented in Faust's answer, whereby CSS implementations back in 2012 allowed specificity values to overflow into each other.
Back in 2012, most browsers implemented a limitation of 255, but this limitation was allowed to overflow. 255 classes had an A,B,c specificity score of 0,255,0, but 256 classes overflowed and had an A,B,c score of 1,0,0. Suddenly our B value became our A value. The Selectors Level 4 documentation completely irradiates that problem by stating that the limit can never be allowed to overflow. With this implementation, both 255 and 256 classes would have the same A,B,c score of 0,255,0.
The problem given in Faust's answer has since been fixed in most modern browsers.
I am currently using the book CSS Mastery: Advanced Web Standards Solutions.
Chapter 1, page 16 says:
To calculate how specific a rule is, each type of selector is assigned
a numeric value. The specificity of a rule is then calculated by
adding up the value of each of its selectors. Unfortunately,
specificity is not calculated in base 10 but a high, unspecified, base
number. This is to ensure that a highly specific selector, such as an
ID selector, is never overridden by lots of less specific selectors,
such as type selectors.
(emphasis mine) and
The specificity of a selector is broken down into four constituent
levels: a, b, c, and d.
if the style is an inline style, then a = 1
b = the total number of id selectors
c = the number of class, pseudo-class, and attribute selectors
d = the number of type selectors and pseudo-element selectors
It goes on to say that you can often do the calculation in base-10, but only if all columns have values less than 10.
In your examples, ids are not worth 100 points; each is worth [0, 1, 0, 0] points. Therefore, one id beats 15 classes because [0, 1, 0, 0] is greater than [0, 0, 15, 0] in a high-base number system.
I am fond of comparison of Specificity ranking to Olympic Games medal table (gold first method — based first on the number of gold medals, then silver and then bronze).
It works also with your question (huge number of selectors in one specificity group). Specificity considered each group separately. In real world I've very rarely seen case with more than a dozen selectors).
There is also quite good specificity calculator available here. You can put your example (#a and .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) there and see the results.
Example of Rio 2016 Olympic Games medal table looks like
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.
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"