Calculate CSS selector specificity instantly. Understand selector weight, priority scores, and resolve style conflicts. Enter any CSS selector to see its specificity value in (a,b,c) format. Free and client-side.
The CSS Specificity Calculator helps developers understand and compare the weight of CSS selectors. CSS specificity determines which styles apply when multiple rules target the same element. The calculator breaks down any selector into its component parts — inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements — and computes the (a,b,c) specificity value. Understanding specificity is essential for debugging CSS conflicts and writing maintainable stylesheets.
CSS specificity is the algorithm browsers use to decide which CSS property values are applied to an element when multiple rules could apply. It is calculated as a tuple of three values (a, b, c): a = number of ID selectors, b = number of class selectors + attribute selectors + pseudo-classes, c = number of element selectors + pseudo-elements.
Specificity is calculated by counting the number of each selector type in a selector string: (a) ID selectors (#id), (b) class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), and (c) element selectors (div) and pseudo-elements (::before). The !important declaration overrides specificity entirely.
An ID selector (#id) always outranks any number of class selectors because specificity is not a base-10 number — it is a tuple. (1, 0, 0) is always greater than (0, 100, 0). No amount of classes can beat a single ID.
No, the universal selector (*) has zero specificity and does not contribute to the specificity calculation.