Subscribe for more articles

Stay up to date with new articles, CSS resources and tools.

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.

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Back to blog
Before you leave...

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

  • Be the first to know when we launch new CSS resources and web development and design tools.