CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Specificity

❮ Previous Next ❯

CSS Specificity: How Browsers Resolve Conflicts

CSS specificity is the set of rules browsers use to determine which CSS style is applied when multiple rules target the exact same element. When a conflict occurs, the rule with the higher specificity value takes priority and "wins."

Basic Specificity Conflict Example:

<style>
    h1 {
        background-color: lightcoral;
        color: white;
        padding: 10px;
    }
    h2 {
        color: navy;
    }
</style>


<h1>Internal CSS applies here.</h1>
<h2 style="color: lightblue; background-color: navy; padding: 10px;">
    Inline CSS overrides internal CSS!
</h2>

CSS Specificity Rules

Understanding where your CSS is located and how it is written is crucial for managing specificity.

1. Inline CSS

2. Internal CSS

3. External CSS

Important Note: Specificity is mainly determined by the Selectors themselves (e.g., #header vs .header), rather than whether the styles are defined internally or externally. If the selectors used in External and Internal CSS contain the exact same components, their specificity is identical. In that case, the styles will be implemented based strictly on the order of inclusion in the HTML document (the last one loaded wins).

Specificity Hierarchy

Every CSS selector has a strict position in the hierarchy. When calculating which rule applies, browsers look at this priority order:

Priority Description
1. Inline style Highest priority. Directly applied to the HTML tag using the style attribute.
2. ID selectors Second highest priority. Identified by the unique id attribute of an element (e.g., #navbar).
3. Classes, Attributes, and Pseudo-classes Medium priority. Targeted using class names (e.g., .button), pseudo-classes like :hover, and attributes like [type="text"].
4. Elements and Pseudo-elements Lowest priority. Applies directly to HTML tags (e.g., h1, div) and pseudo-elements like ::before.

(Note: The Universal selector and inherited values have the absolute lowest specificity, yielding to all of the above).*

Specificity Battle Examples

Let's look at a "battle" between different selectors targeting the exact same <h1> tags to see who wins!

Specificity Hierarchy Example:

<style>
    h1 { background-color: lightgray; color: black; padding: 10px; }
    .class-heading { background-color: lightblue; color: navy; }
    #unique-heading { background-color: navy; color: white; }
</style>


<h1 id="unique-heading" class="class-heading">ID wins</h1>
<h1 class="class-heading">Class wins</h1>
<h1>Element only</h1>
<h1 style="background-color: lightcoral; color: white;">Inline wins</h1>

How to Calculate Specificity (The Math)

If you have complex selectors, you can calculate their "specificity score" using a 4-number system: (Inline, IDs, Classes/Attributes, Elements).

  1. style="..." = 1,0,0,0
  2. #navbar = 0,1,0,0
  3. .menu .item:hover = 0,0,3,0 (Two classes, one pseudo-class)
  4. div p a = 0,0,0,3 (Three elements)

Example Calculation:

/* Score: 0, 1, 1, 2 */
/* (0 Inline, 1 ID, 1 Class, 2 Elements) */
#main-nav .link-btn a:hover {
    color: navy;
}
When comparing two selectors, the browser reads the score from left to right. The first number that is higher wins the battle.

The !important Exception

There is one rule that breaks all specificity hierarchies: !important.

If you append !important to a CSS declaration, it will override everything, even inline styles.

p {
    color: red !important; /* This will beat IDs, Classes, and Inline styles! */
}

Best Practice: Avoid using !important unless absolutely necessary (like overriding third-party plugin styles). Relying on it makes your CSS incredibly difficult to debug and maintain.

Exercise

?

Which of the following has the HIGHEST specificity priority in CSS?

❮ Previous Next ❯