How to use the CSS Specificity Calculator
Enter CSS selectors (one per line). Specificity is shown in (a, b, c) format — a = ID count, b = class/attribute/pseudo-class count, c = element/pseudo-element count.
What is it?
CSS specificity determines which rule wins when multiple rules target the same element. It's calculated as three components: ID selectors (a), class/attribute/pseudo-class selectors (b), and element/pseudo-element selectors (c). Inline styles have even higher specificity. !important overrides all specificity.
The winning rule is whichever has the highest (a, b, c) — compare left to right. Two rules with the same specificity are resolved by source order (last wins).
Benefits
Build complex layouts without memorising syntax
Flexbox, grid, gradients, and box shadows are generated interactively — tweak parameters and see the result live, then copy the CSS directly into your stylesheet.
Prototype and iterate designs in seconds
Visual generators let you experiment with layout, shadows, gradients, and spacing without switching between editor and browser on every change.
Accessible color choices, verified before shipping
Color Contrast Checker confirms text and background combinations meet WCAG 2.1 AA and AAA requirements — catch contrast failures before users or auditors do.
Responsive values that scale correctly
CSS Clamp Calculator and Unit Converter produce fluid, viewport-relative values that work across screen sizes without manual arithmetic or magic numbers.
Frequently asked questions
Does the universal selector (*) count?
No — * has zero specificity (0, 0, 0). It doesn't contribute to any component.
What about :not()?
:not() itself has no specificity, but its argument does. So :not(.active) has specificity (0, 1, 0) — the class inside counts.