CSS Specificity

What Is CSS Specificity?

CSS specificity is the weight or priority given to a selector. When two or more CSS rules apply to the same element and property, the browser uses specificity, cascade order, importance, and origin to decide which rule should be applied.

p {
  color: black;
}

.article-text {
  color: blue;
}

In this example, the class selector .article-text has higher specificity than the element selector p, so the paragraph becomes blue.

Why CSS Specificity Is Important

• Helps you understand why one style overrides another.
• Prevents unnecessary use of !important.
• Makes CSS easier to debug and maintain.
• Improves consistency in large projects and design systems.
• Helps avoid overly complex selectors.
• Supports scalable CSS architecture.
• Reduces style conflicts between components.

CSS Specificity Cheatsheet

The following table shows common selector types from lowest to highest priority.

How CSS Specificity Score Works

Specificity is often explained as a three-part score: ID - Class/Attribute/Pseudo-class - Element/Pseudo-element.

/* 0-0-1 */
p {
  color: black;
}

/* 0-1-0 */
.card {
  color: blue;
}

/* 1-0-0 */
#main-title {
  color: red;
}

The selector with the higher score wins when targeting the same property.

CSS Specificity Examples

Compare the selector weights below:

CSS Cascade vs Specificity

Specificity is only one part of how CSS decides the final style. The cascade also considers importance, origin, cascade layers, and source order.

.button {
  color: blue;
}

.button {
  color: green;
}

Both selectors have the same specificity. Because the second rule comes later, the button becomes green.

Source Order When Specificity Is Equal

If two selectors have equal specificity and both target the same property, the rule that appears later in the stylesheet wins.

.alert {
  background-color: yellow;
}

.alert {
  background-color: orange;
}

The final background color is orange because the second rule appears later.

Inline Styles and Specificity

Inline styles usually override normal stylesheet rules.

<p class="text" style="color: red;">
  This text is red.
</p>

.text {
  color: blue;
}

The text remains red because the inline style has higher priority than the class rule.

CSS !important and Specificity

The !important flag increases declaration priority and can override normal rules. It should be used carefully because it can make CSS harder to maintain.

.button {
  color: blue !important;
}

#main .button {
  color: red;
}

The button stays blue because the first declaration is marked as important.

ID Selectors vs Class Selectors

ID selectors have much higher specificity than class selectors. For scalable CSS, classes are usually preferred for styling.

#primary-card {
  border-color: red;
}

.card.featured {
  border-color: blue;
}

Even though .card.featured has two class selectors, the ID selector still wins.

Specificity and Inheritance

Inheritance passes some property values from parent elements to children. However, directly targeted rules usually beat inherited values.

body {
  color: black;
}

p {
  color: blue;
}

The paragraph is blue because it is directly targeted, even though the body color is inherited.

Low Specificity CSS

Low specificity CSS is easier to override and maintain. Utility classes, component classes, and simple selectors usually produce fewer conflicts.

.card {
  padding: 1rem;
}

.card-title {
  font-size: 1.25rem;
}

This is cleaner than deeply nested selectors.

The Problem with High Specificity

Very specific selectors are hard to override and often lead to more complex CSS.

body main section.article-list article.card div.card-body h2.title {
  color: blue;
}

This selector is difficult to reuse and may force developers to write even more specific selectors later.

Specificity with :is(), :where(), and :has()

Modern CSS selector functions can affect specificity in different ways.

:where(.card) {
  padding: 1rem;
}

.card.featured {
  padding: 2rem;
}

:where() is useful when you want base styles that are easy to override.

How to Debug CSS Specificity

• Inspect the element in browser DevTools.
• Check which CSS rules are crossed out.
• Compare selector specificity scores.
• Look for inline styles or !important.
• Check whether the later rule has equal specificity.
• Look for cascade layers, media queries, or component scope.
• Simplify selectors when possible.

CSS Specificity and Accessibility

Specificity problems can accidentally hide focus styles, reduce contrast, or override accessible component states.

• Do not override focus outlines without a clear replacement.
• Keep focus styles easy to apply and hard to accidentally remove.
• Avoid using !important to force inaccessible colors.
• Test hover, focus, active, disabled, valid, and invalid states.
• Use consistent component selectors for accessible states.

CSS Specificity and SEO

CSS specificity does not directly affect search rankings, but cleaner CSS helps maintain readable layouts, accessible content, responsive behavior, and reliable user experience.

• Maintainable CSS makes page updates easier.
• Reliable styles reduce broken layouts.
• Accessible visual states improve usability.
• Consistent design improves content readability.
• Fewer CSS conflicts support long-term site quality.

Common CSS Specificity Mistakes

• Using IDs for styling when classes would be easier to maintain.
• Overusing !important.
• Writing deeply nested selectors.
• Using inline styles for normal component styling.
• Not understanding why later rules override earlier rules.
• Forgetting that pseudo-classes count like classes.
• Accidentally overriding focus or accessibility styles.
• Fixing every conflict by increasing selector complexity.

CSS Specificity Best Practices

• Prefer classes for styling components.
• Keep selectors short and readable.
• Avoid styling with IDs unless truly necessary.
• Avoid !important except for utilities or emergency overrides.
• Use naming systems like BEM or component classes for predictable CSS.
• Use :where() for low-specificity base styles.
• Place utilities and overrides intentionally in your CSS architecture.
• Use DevTools to inspect specificity conflicts before changing code.
• Document design system layers and component override rules.

Key Takeaways

• CSS specificity decides which selector wins when rules conflict.
• ID selectors are more specific than class selectors.
• Class, attribute, and pseudo-class selectors share the same specificity level.
• Element and pseudo-element selectors have lower specificity.
• If specificity is equal, the later rule usually wins.
• Inline styles and !important can override normal stylesheet rules.
• Low-specificity CSS is easier to maintain and override.