CSS Specificity Calculator

CSS specificity is the algorithm browsers use to determine which CSS rule applies when multiple rules match the same element. It is represented as a 4-part value (inline, ID, class, element). Higher specificity wins. When two selectors have equal specificity, the one declared later in the stylesheet wins (the cascade).

Specificity is calculated as four separate columns: (inline, ID, class, element). Inline styles = 1,0,0,0. ID selectors (#foo) = 0,1,0,0. Class selectors (.foo), attribute selectors ([type='text']), and pseudo-classes (:hover) = 0,0,1,0. Element selectors (div, p) and pseudo-elements (::before) = 0,0,0,1. Combinators (+, ~, >, space) and the universal selector (*) contribute 0.

.nav a has specificity (0,0,1,1) — one class + one element. nav a.link has specificity (0,0,1,2) — one class + two elements. nav a.link wins because (0,0,1,2) > (0,0,1,1). Specificity is compared column by column from left to right; a tie in one column is broken by the next.

Yes. !important overrides the normal specificity algorithm entirely — an !important declaration always wins against a non-!important declaration, regardless of specificity. However, if two competing declarations both use !important, specificity is compared again. Using !important excessively makes CSS hard to maintain; prefer increasing specificity or restructuring your selectors.

The :not() pseudo-class itself contributes 0 to specificity, but its argument does count. For example, :not(.active) has specificity (0,0,1,0) because .active is a class selector. The same applies to :is() and :has() — the most specific argument within them is counted.

:where() was specifically designed to have zero specificity for all its arguments. This is useful for writing base styles or resets that you want to override easily without increasing specificity. Unlike :is() or :not(), :where(h1, h2, h3) always contributes (0,0,0,0).