#20088 - Specificity - CSS - web.dev
https://web.dev/learn/css/specificity/An element (type) or pseudo-element selector gets 1 point of specificity.
A class or pseudo-class selector gets 10 points of specificity.
An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).
This is actually false.
Lets have the HTML :
<div id="myid" class="one two three four five six seven eigth nine ten eleven">Lorem Ipsum</div>
And this CSS :
#myid {
color: red;
}
.one.two.three.four.five.six.seven.eigth.nine.ten.eleven {
color: blue;
}
The #id gives it 10 points.
The .classes give them 1 point each, wich gives the div 11 points.
Yet, the div will be red.
With the given explanation, you give the impression that enough .classes can overtake an #id al long as there are enough of them.
This. Is. Untrue.
The specificity is not 1, 10, 100, 1000. It’s not even numeric and so the can’t be compared.
Individual classes do add up… among classes only.
This would turn the div red :
.one.two.three { color: red; } /* specificity of 3 */
.one.two { color: blue; } /* specificity of 2 */
However, when you mix selectors, keep in mind that they occupy ranks, not powers of ten.
And a rank of an id will always be above a rank of a class.
So, the specificity of one #id will overtake even a thousand classes.
Personally, I prefer using hyphens to denote ranks :
#id.class .class > span+span+span {}
has a specificity of 1-2-3, because this selector sums 1 #id, 2 .classes and 3 elements.
And 1-0-0 will overtake even 0-100000-100000. The rank matters, not the amount of selectors.
Yes, I saw you ended that tutorial with this notation, but it begins on a somehow poorly manner that might induce errors.