CSS specificity can sometimes feel like a guessing game when your styles aren't applying the way you expect, but it is actually based on a strict mathematical scoring system.
In short, specificity is the algorithm browsers use to decide which CSS property values are the most relevant to an element and, therefore, which ones will be applied. When multiple CSS rules target the exact same element, the rule with the highest specificity "wins."
Here is a breakdown of how that scoring system works.
The Specificity Hierarchy
Think of specificity as a four-category scoring system, often written like 0, 0, 0, 0. The browser checks the categories from left to right. A single point in a higher category always beats any number of points in a lower category. Here are the categories, ranked from most specific to least specific.
Inline Styles (1, 0, 0, 0) are the most specific. These are styles attached directly to the HTML element using the style attribute. An example would be <h1 style="color: red;">.
IDs (0, 1, 0, 0) are second in line. These are selectors that use an ID, such as #header or #submit-button.
Classes, Attributes, and Pseudo-classes (0, 0, 1, 0) come third. This includes class names, attribute selectors like [type="text"], and pseudo-classes like :hover or :focus. Common examples are .nav-item, .active, a:hover, or input[disabled].
Elements and Pseudo-elements (0, 0, 0, 1) are the least specific. These target basic HTML tags and pseudo-elements like ::before or ::after. Examples include div, h1, p, or p::first-line.
How to Calculate the Specificity Score
To find the specificity of a selector, you simply count the number of IDs, classes, and elements it contains.
| Selector | Calculation (Inline, ID, Class, Element) | Final Score |
h1 | 0 inline, 0 IDs, 0 classes, 1 element | 0, 0, 0, 1 |
.button | 0 inline, 0 IDs, 1 class, 0 elements | 0, 0, 1, 0 |
nav ul li a.active | 0 inline, 0 IDs, 1 class (.active), 4 elements (nav, ul, li, a) | 0, 0, 1, 4 |
#main-content .sidebar h2 | 0 inline, 1 ID (#main-content), 1 class (.sidebar), 1 element (h2) | 0, 1, 1, 1 |
a:hover | 0 inline, 0 IDs, 1 pseudo-class (:hover), 1 element (a) | 0, 0, 1, 1 |
The Tie-Breaker: If two selectors have the exact same specificity score, the one that appears last in the CSS file wins.
There are also tools to help you calculate the CSS specificity; check here.
Important Exceptions to Note for CSS Specificity
There are a few unique rules to keep in mind when working with specificity. The Universal Selector (*) and Combinators (+, >, ~) have no specificity value (0, 0, 0, 0) and do not add anything to the score.
The :not() pseudo-class is also unique because the :not() itself adds no specificity, but the selectors placed inside the parentheses do count towards the score.
Finally, the !important rule acts as the ultimate trump card. If you add !important to a CSS rule (e.g., color: red !important;), it overrides normal specificity entirely, even inline styles. It is best practice to avoid using !important unless absolutely necessary, as it makes debugging CSS very difficult later on.
