DEV Community

It's Not Dark Magic: Pulling Back The Curtains From Your Stylesheets

Aimee Knight on June 04, 2017

Chances are if you're a web developer you're going to have to write some CSS from time to time. When you first looked at CSS it probably seemed lik...
Collapse
 
thejase profile image
Jason Featheringham

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.

Collapse
 
aimeeknight profile image
Aimee Knight

Thank you Jason! I should have clarified this further!

Collapse
 
thejase profile image
Jason Featheringham

I noticed the article was clarified, and it's far better articulated than I could have done. Excellent work!

Collapse
 
benschac profile image
Benjamin Schachter

This is super helpful. I used it to calculate the order and winner of each class.

Collapse
 
thejase profile image
Jason Featheringham

Glad it was helpful! I must admit: when I first learned this myself, it took a little bit of the magic away. 🤣

Collapse
 
askanison4 profile image
Aaron • Edited

Great read, thanks for that! :)

For anyone looking for ways to see this stuff working under the hood, be sure to check out Chrome's debugger views for browser painting: developers.google.com/web/tools/ch...