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:
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.