CSS specificity: Why isn't CSS specificity weight of 10 or more class selectors greater than 1 id selector? [migrated]
- by ajc
While going through the css specificity concept, I understood the fact that it is calculated as a 4 parts
1) inline (1000)
2) id (100)
3) class (10)
4) html elments (1)
CSS with the highest rule will be applied to the corresponding element.
I tried the following example
Created more than 10 classes
<div class="a1"> ....
<div class="a13" id="id1"> TEXT COLOR
</div> ...
</div>
and the css as
.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 .a12 .a13 {
color : red;
}
#id1 {
color: blue;
}
Now, even though in this case there are 13 classes the weight is 130. Which is greater than the id.
Result - JSFiddle CSS specificity
