CSS Specificity Calculator

When you see two CSS selectors can you always say which one has a higher specificity? For example, which of the following selectors would overrule the other?

div.products li > *[data-name="test"] a
:first-child .selected:hover

I don’t always know with some of the more complicated selectors, so I made a little web app to figure it out for me: specificity.keegan.st

The app uses regular expressions to find the parts of the selector which contribute to specificity. It highlights each part with a background colour to help you learn the specificity rules. The core part of the app is a JavaScript module I wrote which is available through npm via:

npm install specificity

The JavaScript module source and the website source are on GitHub.

4 thoughts on “CSS Specificity Calculator”

  1. This is brilliant! Thank you for making it 🙂

    This is especially helpful for validating some long standing arguments I’ve had in favor of OOCSS/SMACSS over conventional practices.

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *