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.