I think it’s important to note that this is not how specificity is calculated. It is not a single number. Rather, each selector type is counted in a base-infinity count. The selector with the highest count of each in order is the one who wins.
.container #main a = 1,1,1 not 111. A selector with 10 classes = 0,10,0 not 0100. This is why #main would always beat .container * 10.
I think it’s important to note that this is not how specificity is calculated. It is not a single number. Rather, each selector type is counted in a base-infinity count. The selector with the highest count of each in order is the one who wins.
.container #main a= 1,1,1 not 111. A selector with 10 classes = 0,10,0 not 0100. This is why#mainwould always beat.container* 10.This is super helpful. I used it to calculate the order and winner of each class.
Glad it was helpful! I must admit: when I first learned this myself, it took a little bit of the magic away. 🤣
Thank you Jason! I should have clarified this further!
I noticed the article was clarified, and it's far better articulated than I could have done. Excellent work!