2026-04-026 min read

Specificity (Web Development)

Learn Specificity (Web Development) step by step with clear examples and exercises.

Why This Matters

Understanding CSS Specificity is crucial in web development as it helps resolve conflicts between multiple selectors targeting the same element, ensuring that styles are applied correctly and predictably. Mastering CSS Specificity is essential for creating visually appealing and bug-free web pages, especially during collaborative projects or when making changes to existing designs.

Prerequisites

Before diving into CSS Specificity, it's important to have a basic understanding of HTML (HyperText Markup Language) and CSS. You should be familiar with creating HTML documents, linking external stylesheets, and applying CSS properties to HTML elements. Additionally, having knowledge about the Box Model, Flexbox, and Grid systems will help you better understand how CSS Specificity affects layouts and designs.

Core Concept

The CSS Specificity Formula

When multiple CSS selectors target the same element, the browser determines which style to apply based on a specificity formula. This formula considers the number of ID selectors (#id), class selectors (.class), and type selectors (element name, e.g., div). Here's how it works:

Count the number of each selector type in the conflicting styles. For example:

Selector A: #header .nav a has one ID selector (#header), one class selector (.nav), and one type selector (a).
Selector B: .header-nav a has no ID selectors but two class selectors (.header-nav, a).

Multiply the count of each selector type by its respective weight:

For ID selectors, the weight is 100.
For class selectors, the weight is 10.
For type selectors (element names), the weight is 1.

Add up the weights for each selector type to get the specificity score.
The selector with the higher specificity score takes precedence.

Examples of CSS Specificity

Let's examine a few examples to illustrate how CSS Specificity works:

Example 1:

<div id="header" class="nav">
<a href="#">Home</a>
</div>

/* Selector A */
#header .nav a {
color: red;
}

/* Selector B */
.header-nav a {
color: blue;
}

In this example, Selector A has one ID selector (100) and two class selectors (20), while Selector B has no ID selectors but two class selectors (20). The total specificity score for Selector A is 120, and for Selector B is 20. Therefore, Selector A's style (color: red) will be applied to the link, overriding Selector B's style (color: blue).

Example 2:

<div id="header" class="nav">
<a href="#" class="link">Home</a>
</div>

/* Selector A */
#header .nav a.link {
color: red;
}

/* Selector B */
.nav a.link {
color: blue;
}

In this example, both selectors target the same link with an ID selector, a class selector, and another class applied to the link itself. The total specificity score for both selectors is the same (100 + 10 + 1 = 111). However, since Selector A has an additional ID selector, it takes precedence over Selector B, and its style (color: red) will be applied to the link.

Inheritance and Cascade

It's important to understand that CSS properties can be inherited by default, meaning they will be applied to child elements unless explicitly overridden. Additionally, the cascade is an essential aspect of CSS that determines how multiple styles are combined to create the final output. Make sure you understand how both inheritance and the cascade work and how they interact with specificity.

Worked Example

Let's create a simple HTML document with multiple styles targeting the same element and observe how CSS Specificity affects the rendered output:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Specificity Example</title>
<style>
/* Selector A */
#header .nav a {
color: red;
}

/* Selector B */
.header-nav a {
color: blue;
}

/* Selector C */
.nav a.link {
color: green;
}
</style>
</head>
<body>
<div id="header" class="header-nav">
<a href="#" class="link">Home</a>
</div>
</body>
</html>

In this example, we have three selectors targeting the same link: Selector A with an ID selector (#header) and two class selectors (.nav, a), Selector B with no ID selectors but two class selectors (.header-nav, a), and Selector C with one class selector (.nav) and another class applied to the link itself (.link).

Selector A has a higher specificity score (120) compared to Selector B (20) and Selector C (11). Therefore, Selector A's style (color: red) will be applied to the link, overriding both Selector B's and Selector C's styles.

Common Mistakes

Forgetting to account for specificity when writing CSS: It's essential to consider how your CSS selectors will interact with each other when styling your HTML elements.
Using overly specific selectors unnecessarily: Avoid using overly specific selectors (e.g., #header .nav a.link) when a less specific selector (e.g., .nav a) would suffice, as it can make your styles harder to manage and maintain.
Not understanding the cascade: The cascade is an essential aspect of CSS that determines how multiple styles are combined to create the final output. Make sure you understand how the cascade works and how it interacts with specificity.
Ignoring inheritance: Some properties in CSS are inherited by default, meaning they will be applied to child elements unless explicitly overridden. Be aware of which properties are inheritable and how they can impact your styles.
Not using proper naming conventions for classes and IDs: Using clear, descriptive names for your classes and IDs helps make your CSS more readable and maintainable.
Overusing !important: The !important keyword should be used sparingly as it can make debugging more difficult and break the specificity formula.
Not testing in multiple browsers: Different browsers may handle CSS Specificity slightly differently, so it's important to test your styles in various browsers to ensure consistency across platforms.

Practice Questions

Given the following HTML and CSS:

<div id="header" class="nav">
<a href="#" class="link">Home</a>
</div>

#header .nav a {
color: red;
}

.header-nav a {
color: blue;
}

.nav a.link {
color: green;
}

Which style will be applied to the link?

Answer: The link's color will be red (Selector A has a higher specificity score).

Given the following HTML and CSS:

<div id="header" class="nav">
<a href="#" class="link">Home</a>
</div>

#header .nav a {
color: red;
}

.header-nav a {
color: blue;
}

.nav a {
color: green;
}

Which style will be applied to the link?

Answer: The link's color will be red (Selector A has a higher specificity score).

Given the following HTML and CSS:

<div id="header" class="nav">
<a href="#" class="link">Home</a>
</div>

#header .nav a {
color: red !important;
}

.header-nav a {
color: blue;
}

.nav a.link {
color: green;
}

Which style will be applied to the link?

Answer: The link's color will be red (the !important keyword overrides the specificity formula).

FAQ

Why does CSS Specificity matter?

CSS Specificity helps in resolving conflicts between multiple selectors targeting the same element, ensuring that styles are applied correctly and predictably.

Can I override a more specific selector with a less specific one?

Yes, you can override a more specific selector with a less specific one by either increasing the weight of the less specific selector or decreasing the weight of the more specific selector (e.g., by removing an ID selector).

What happens when two selectors have the same specificity score?

When two selectors have the same specificity score, the last defined rule takes precedence (the cascade principle).

How can I check a CSS selector's specificity score manually?

You can use browser developer tools to inspect an element and view its computed styles, including the specificity score of each style rule affecting it. Alternatively, you can use online tools like Specificity Calculator to calculate the specificity score of a given CSS selector.

How does the !important keyword affect CSS Specificity?

The !important keyword overrides the specificity formula, ensuring that the rule with !important takes precedence over any other rule, regardless of its specificity score. However, using !important should be done sparingly as it can make debugging more difficult and break the intended design.

What are some best practices for writing CSS with Specificity in mind?

Use descriptive class names to avoid overly specific selectors.
Avoid using !important unless absolutely necessary.
Understand the cascade and how it interacts with specificity.
Test your styles across multiple browsers to ensure consistency.