CSS Specificity Calculator

The Ultimate Guide to CSS Specificity

Welcome to the CSS Specificity Calculator. If you have ever written a perfectly valid CSS rule, refreshed your browser, and seen absolutely nothing change, you have run head-first into a specificity conflict. CSS Specificity is the algorithm browsers use to decide which CSS rules get applied when multiple selectors target the exact same HTML element. Understanding how this scoring system works is the key to mastering CSS and keeping your stylesheets maintainable.

How is the Specificity Score Calculated?

Specificity is generally represented as a series of three numbers: (IDs, Classes, Elements). When comparing two conflicting CSS rules, the browser looks at these numbers from left to right. The highest number wins.

Here is how points are awarded:

• IDs (e.g., #navbar): Worth 1 point in the first column. This is the most powerful standard selector.
• Classes, Attributes, and Pseudo-classes (e.g., .button, [type="text"], :hover): Worth 1 point in the second column.
• Elements and Pseudo-elements (e.g., div, h1, ::before): Worth 1 point in the third column. This is the weakest selector.

Universal selectors (*) and combinators (+, >, ~) have no specificity score and do not affect the calculation.

Example Specificity Battles

Let's look at a few examples to see how the browser declares a winner:

• p (Score: 0, 0, 1) vs .text-red (Score: 0, 1, 0) — The class wins.
• ul.menu li a (Score: 0, 1, 3) vs #nav-link (Score: 1, 0, 0) — The ID wins. Even though the first selector has 4 total targets, a single ID beats any amount of classes or elements.
• .btn.primary (Score: 0, 2, 0) vs .btn (Score: 0, 1, 0) — The chained class wins.

The Danger of !important

If you append !important to a CSS declaration (e.g., color: red !important;), it entirely bypasses the specificity scoring system. It will override IDs, inline styles, and chained classes. It is the nuclear option of CSS.

While tempting to use when you are frustrated, using !important is heavily discouraged by industry experts. If you use it to solve a conflict today, the only way to override it tomorrow is to write another !important rule. This leads to a toxic, unmaintainable codebase. Instead of using !important, use our calculator to figure out the current specificity score of the stubborn element, and simply write a new rule that beats it by one point (e.g., by adding a parent class to the selector).

Inline Styles and the Cascade

It's worth noting that if you apply a style directly within the HTML (e.g., <div style="color: blue;">), it is treated as a fourth column of specificity: (Inline, IDs, Classes, Elements). An inline style will always beat an ID in an external stylesheet. The only thing that can override an inline style is an !important flag.

Finally, what happens if two rules have the exact same specificity score? This is where the "Cascade" in Cascading Style Sheets comes into play. The browser will apply the rule that was loaded last (further down the stylesheet).