I have been following this article on CSS specifity. It assigns values to selectors and the selector with the highest sum of values will have precedence.
An id has a value of 100. a class has a value of 10.
My problem is in this example I tried.
HTML
<div id="id" class="a b c d e f g h i j k l">What color?</div>
CSS
/* calculated specificity: 100 */
#id{
color:red;
}
/* calculated specificity: 120 */
.a.b.c.d.e.f.g.h.i.j.k.l{
color:green;
}
I expected the div to be green since 12 classes would have a value of 120. But it is red when I run it. Is there a problem with my calculation?
ID trumps class specificity as MDN states:
The following list of selectors is by increasing specificity:
- Universal selectors
- Type selectors
- Class selectors
- Attributes selectors
- Pseudo-classes
- ID selectors
- Inline style
The specificity calculation can be a bit confusing, but you need to remember, as the W3 states, that when calculating the specificity that you concatenate, not add the numbers together.
So for example:
So yes, the ID will trump the pure class selection every time.