CSS Specificity

Imagine styling a button on your website. You write a rule telling all buttons to be red, but then you write another rule telling buttons with the class blue-btn to be blue. The browser has to decide which rule wins. CSS Specificity is the scoring system the browser uses to resolve this conflict. It calculates a score for every CSS selector based on how specific it is. The selector with the highest score wins the conflict, and its style is applied to the element.

In this page:

The Specificity Score Calculation
Element vs. Class Specificity
Class vs. ID Specificity
Inline Styles Override
The !important Exception

Syntax

css

/* specificity: inline > #id > .class > element */
element { }
.class-name { }
#id-name { }

The Specificity Score Calculation

Specificity is calculated as a four-part score (0,0,0,0). From highest to lowest, the columns represent inline styles, IDs, classes/attributes/pseudo-classes, and element tags.

Note: Keep your selectors simple to avoid creating specificity conflicts that are hard to debug.

Warning: Do not write deeply nested selectors as they artificially inflate your specificity score.

Example: The Specificity Score Calculation

css

<style>
p { color: black; }
.text { color: blue; }
#main { color: red; }
</style>
<p id="main" class="text">Highest specificity wins: red</p>

Element vs. Class Specificity

Element selectors target HTML tags directly, while class selectors target custom classes. A class selector always wins over an element tag selector because it is more specific.

Note: Use classes for styling components to keep your CSS rules reusable.

Warning: Styling base elements directly can cause accidental styling leaks across your page.

Example: Element vs. Class Specificity

css

<style>
p { color: black; }
.highlight { color: green; }
</style>
<p class="highlight">Class beats element: green</p>

Class vs. ID Specificity

An ID selector points to a single, unique element on your page. Because IDs are unique, they carry much more specificity weight than group styling classes.

Note: Use classes for styling elements, and reserve IDs for unique anchors and scripting.

Warning: Avoid using IDs as your primary CSS styling selectors, as it makes your stylesheets difficult to reuse.

Example: Class vs. ID Specificity

css

<style>
.text { color: green; }
#unique { color: purple; }
</style>
<p id="unique" class="text">ID beats class: purple</p>

Inline Styles Override

Inline styles are declared directly inside your HTML elements using the style attribute. Because they are defined directly on the element, they have a specificity score of (1,0,0,0) and override any stylesheet rules.

Note: Only use inline styles for quick debugging or dynamic changes styled by JavaScript.

Warning: Relying on inline styles makes it difficult to maintain design consistency across your site.

Example: Inline Styles Override

css

<style>
p { color: green; }
</style>
<p style="color: orange;">Inline style wins: orange</p>

The !important Exception

The !important declaration is a nuclear option in CSS specificity. When appended to a property value, it bypasses the standard specificity score calculation completely, forcing the browser to apply that rule.

Note: Avoid using the !important tag to force style overrides because it ruins layout inheritance and makes troubleshooting difficult.

Warning: Overusing !important leads to specificity wars that make your stylesheets unmanageable.

Example: The !important Exception

css

<style>
p { color: green !important; }
</style>
<p style="color: orange;">!important beats even the inline style: green</p>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Counters Next Lesson → CSS Specificity Hierarchy