Sometimes multiple CSS selectors apply different styles to the same element. CSS Specificity decides which style has higher priority and will be displayed in the browser.

Why is Specificity Important?

• Resolves CSS conflicts.
• Determines which rule is applied.
• Makes CSS easier to manage.
• Helps avoid unexpected styling.
• Improves maintainability of large projects.

p{

    color:blue;

}

.text{

    color:red;

}

Since the class selector has higher specificity than the element selector, the text color will be red.

CSS Specificity is a priority system used by browsers to decide which CSS declaration should be applied when more than one rule matches an element.

#title{

    color:green;

}

.heading{

    color:red;

}

h1{

    color:blue;

}

CSS follows a hierarchy of selectors. The selector with the higher priority overrides selectors with lower priority.

*{

    color:black;

}

p{

    color:blue;

}

.note{

    color:red;

}

#message{

    color:green;

}

Browsers calculate specificity using four values. The higher the value, the higher the priority.

#header .menu li{

    color:red;

}

Specificity Calculation: 100 + 10 + 1 = 111

Example 1

p{

    color:blue;

}

.text{

    color:red;

}

The class selector wins because its specificity is higher.

Example 2

.text{

    color:red;

}

#title{

    color:green;

}

The ID selector overrides the class selector.

Example 3

    Welcome

The inline style overrides external and internal CSS because it has the highest specificity.

When multiple CSS rules match the same element, the browser compares their specificity values and applies the rule with the highest specificity.

Example 1 : Element vs Class

p{

    color:blue;

}

.text{

    color:red;

}

Result: The class selector wins because its specificity (10) is higher than the element selector (1).

Example 2 : Class vs ID

.text{

    color:red;

}

#title{

    color:green;

}

Result: The ID selector wins because its specificity (100) is greater than the class selector (10).

Example 3 : Multiple Selectors

#header .menu li{

    color:blue;

}

.menu li{

    color:red;

}

Result: #header .menu li wins because its specificity is 111.

The !important rule overrides almost every other CSS declaration regardless of specificity.

p{

    color:blue;

}

.text{

    color:red !important;

}

CSS can be applied in three different ways. Their priorities are different when styling the same element.

    Welcome

• Prefer classes over IDs for styling.
• Avoid deeply nested selectors.
• Use meaningful class names.
• Minimize the use of !important.
• Keep selectors simple and readable.
• Organize CSS into reusable components.
• Test styles after adding new selectors.

#content .menu li{

    color:red;

}

.menu li{

    color:blue;

}

Result: The first selector wins because its specificity (111) is greater than the second selector (11).

Beginners often create CSS conflicts by writing selectors with unnecessarily high specificity. Avoiding these mistakes makes your CSS easier to maintain.

❌ Poor

#header #menu .nav ul li a{

    color:red !important;

}

✔ Better

.nav-link{

    color:red;

}

CSS Specificity is a core feature of CSS and is fully supported by all modern web browsers.

.navbar a{

    color:white;

}

.btn-primary{

    background:#0d6efd;

}

1. What is CSS Specificity?
2. Why is CSS Specificity important?
3. Which selector has the highest specificity?
4. How is specificity calculated?
5. What is the specificity value of an ID selector?
6. What is the specificity value of a class selector?
7. When should you avoid using !important?
8. What is the difference between ID and class selectors?
9. Does an inline style override external CSS?
10. How can CSS conflicts be reduced?

In this lesson, you learned:

• ✔ Introduction to CSS Specificity.
• ✔ CSS Specificity hierarchy.
• ✔ How specificity is calculated.
• ✔ Examples of specificity.
• ✔ The !important rule.
• ✔ Inline, Internal, and External CSS priorities.
• ✔ Best practices.
• ✔ Common mistakes.
• ✔ Browser support.
• ✔ Real-world examples and interview questions.