CSS Specificity Calculator
Compute the specificity (a, b, c) of a CSS selector — IDs, classes/attributes/pseudo-classes, elements. Useful to understand why your rule is not applying. Everything in your browser.
Calculate a CSS selector's specificity
When a CSS rule simply won't apply, specificity is usually the one to blame. It's the point system that decides which selector wins when two compete for the same element. Paste a selector here and you get its specificity laid out clearly.
The value shows up split across the three levels that count: IDs first, then classes, attributes and pseudo-classes, and finally elements and pseudo-elements. With that breakdown in front of you, it becomes obvious why a #id beats ten classes, or why your rule keeps getting overridden. Writing more predictable CSS follows naturally from there.
Because the calculation happens inside your browser, you just paste the selector to see its weight. A handy companion when you're chasing down style conflicts.
Related Tools
PX ↔ REM / EM Converter
Convert pixels to REM and EM and vice versa with configurable base. Reference table with the most common CSS sizes. Essential for web.
CSS Unit Converter
Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.
Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.