If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up in different levels.

This CSS Selector specificity can be confusing if you're just starting out, or if you're working with a particularly complex set of styles. Quickly figuring out which CSS selector has the highest specificity helps a lot in finding out what's going on and getting your bearing on the styling.

To help with this, Polypane now has an online CSS specificity calculator:

Online CSS selector specificity calculator

The Polypane CSS specificity calculator not only has the specificity, but it also tells you how it made that score, and which parts of your selector fall in what category. There's also a short list of gotcha's you might run into when dealing with CSS Specificity.

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing
Back to blog
Thank you for reading this article!

Wait! Join thousands of devs getting tips and tricks on building better websites.

  • Don't miss out on exclusive extra content not available on the blog.