Specificity

Understand how the browser calculates specificity to determine which CSS rule applies when multiple rules target the same element.

What it is

CSS specificity is a ranking system used by browsers to resolve conflicts between style rules. When two or more rules apply to the same HTML element, the browser does not simply pick the last one written; it calculates a "specificity score" for each rule. The rule with the highest score wins. If scores are equal, the rule that appears later in the stylesheet takes precedence (the cascade).

The mental model is often described as a four-part value: (inline, id, class/attribute/pseudo-class, element/pseudo-element). Think of this as a base-10 number where each position represents a different type of selector strength.

Why it matters

• Predictability: It prevents unexpected style overrides when working on large codebases.
• Maintainability: Understanding specificity helps you write cleaner selectors without resorting to excessive !important flags.
• Debugging: It allows developers to quickly identify why a specific style isn't applying in browser developer tools.
• Component Design: It informs decisions about whether to use IDs, classes, or utility-first approaches in modern frameworks.

Syntax or steps

To calculate specificity, count the occurrences of each selector type in your rule. Assign points based on the following hierarchy:

1. Inline Styles: Highest priority (e.g., style="color: red"). Score: 1,0,0,0.
2. ID Selectors: e.g., #header. Score: 0,1,0,0.
3. Class, Attribute, and Pseudo-class Selectors: e.g., .btn, [type="text"], :hover. Score: 0,0,1,0.
4. Element and Pseudo-element Selectors: e.g., p, ::before. Score: 0,0,0,1.

The universal selector (*) and combinators (>, +, ~) have zero specificity.

Example

/* Rule A */
#main .content p { color: blue; }

/* Rule B */
.content p span { color: red; }

/* Rule C */
p { color: green; }

Analysis:

• Rule A: Contains 1 ID (#main), 1 Class (.content), and 1 Element (p). Specificity: 0,1,1,1.
• Rule B: Contains 1 Class (.content) and 2 Elements (p, span). Specificity: 0,0,1,2.
• Rule C: Contains 1 Element (p). Specificity: 0,0,0,1.

If an element matches all three rules, Rule A wins because its ID component makes it more specific than Rule B, regardless of Rule B having more total selectors.

Common mistakes

• Overusing IDs: IDs create high specificity walls that are hard to override later. Prefer classes for styling components.
• Ignoring the Cascade: Developers often forget that if specificity is tied, the last rule defined in the file wins. Order matters.
• Using !important carelessly: This breaks the natural flow of specificity and makes debugging extremely difficult. Use it only as a last resort.
• Confusing Descendant vs. Child: While combinators don't add specificity themselves, the elements they connect do. div div p has higher specificity than div p.

When to use it

Specificity is always active; you cannot turn it off. However, you can choose strategies to manage it.

Prefer low-specificity architectures (like BEM or Utility-first) to keep stylesheets flexible and easy to maintain.

Practice

Guided Exercise: Calculate the specificity of nav ul li a:hover.

Solution Hint: Count elements (nav, ul, li, a) and pseudo-classes (:hover). Result: 0,0,1,4.

Challenge: Write a selector that targets a paragraph inside a div with class .article but ensure it loses to a rule targeting just .article p.

Solution Hint: You cannot make a more complex selector lose to a simpler one unless you change the order or use !important. Instead, realize that div.article p has specificity 0,0,1,2 while .article p has 0,0,1,1. To make the first lose, you must place it *before* the second in the stylesheet.

Quick check

Question: Which has higher specificity: #id .class or .class #id?

Answer: They are equal. Both contain one ID and one class. The order of selectors in the string does not affect the calculation, only the types present.

Summary

CSS specificity is a deterministic algorithm that prioritizes inline styles, then IDs, then classes/attributes, and finally elements. Mastering it allows you to predict style outcomes and build robust, maintainable interfaces without relying on hacks like !important.