❮ Previous Next ❯

CSS Specificity

  • Understand CSS specificity to control which CSS rules are applied to elements.

  • What Is CSS Specificity ?

    CSS Specificity is the rule system browsers use to decide which CSS style is applied when multiple rules target the same element.

    In simple words:

    Specificity decides which CSS rule is stronger.

    When styles conflict, the browser compares specificity first - not order (in most cases).

    Why CSS Specificity is Important

    Without understanding specificity:

    Styles don’t apply as expected
    You keep adding !important
    CSS becomes messy and fragile

    With proper understanding:

    Predictable styling
    Clean, maintainable CSS
    Fewer bugs and overrides

    Real-life comparison:
    Four people give instructions:

    Friend → Teacher → Principal → Owner
    Who wins ? The one with higher authority.
    That’s exactly how CSS specificity works.

    CSS Specificity Priority Order

    From lowest → highest priority:

    PrioritySelector Type
    1️Element (p, div)
    2️Class (.box), Attribute, Pseudo-class
    3️ID (#box)
    4️Inline style (style="")

    Element Selector (Lowest Priority)

Element Selector

An element selector targets HTML tags directly and has the lowest specificity in CSS. 

p {
  color: blue;
}

  • Applies to all <p> elements
    Very low specificity

    Real-life comparison:
    General rule for all students.

    Class Selector (Higher Than Element)

Class Selector (Higher Specificity than Element)

A class selector targets elements using a class name and has higher specificity than an element selector. 

<!DOCTYPE html>
<html>
<head>
    <title>Class Selector Example</title>
    <style>
        .text {
            color: green;
        }
    </style>
</head>
<body>
    <p class="text">Hello</p>
</body>
</html>

  • Overrides element selector

    Real-life comparison:
    Special instructions for a group.

    ID Selector (Higher Than Class)

ID Selector (Higher Specificity than Class)

An ID selector targets a unique element using its id and has higher specificity than both class and element selectors. 

<!DOCTYPE html>
<html>
<head>
    <title>ID Selector Example</title>
    <style>
        #message {
            color: red;
        }

        .text {
            color: green;
        }

        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="message" class="text">Hello</p>
</body>
</html>

  • ID rule wins

    Real-life comparison:
    Instruction given to one specific person.

    Inline Style (Highest Priority)

Inline Style (Highest Specificity)

Inline styles are written directly inside an HTML element and have the highest priority in normal CSS specificity. 

<p id="message" class="text" style="color: purple;">
  Hello
</p>

  • Inline style overrides everything

    Real-life comparison:
    Direct order from the owner.

    How Browsers Calculate Specificity

    Selector TypeScore
    Inline style1000
    ID100
    Class / Attribute / Pseudo-class10
    Element / Pseudo-element1

How CSS Specificity is Calculated

Browsers calculate CSS specificity using a scoring system to decide which style rule wins. 

div p {
  color: blue;
}
  • Specificity = 1 (div) + 1 (p) = 2

Complete Specificity Demonstration Example

This example shows how CSS specificity works when multiple selectors target the same element. 

<!DOCTYPE html>
<html>
<head>
    <title>CSS Specificity Example</title>
    <style>
        /* Element Selector */
        p {
            color: blue;
        }

        /* Class Selector */
        .text {
            color: green;
        }

        /* ID Selector */
        #title {
            color: red;
        }
    </style>
</head>
<body>

    <p id="title" class="text">Hello</p>
</body>
</html>

  • Final color → red
    (ID has higher specificity)

    Same Specificity → Last Rule Wins

    If two selectors have equal specificity, the last one written in CSS is applied.

CSS Order Rule

When two selectors have the same specificity, the rule that appears later in the CSS file overrides the earlier one. 

p {
  color: blue;
}

p {
  color: green;
}

  • Green wins (declared last)

    Real-life comparison:
    Last instruction given before an exam.

    About !important 

Using !important in CSS

!important forces a CSS rule to override other rules, regardless of specificity (except other !important rules). 

p {
  color: red !important;
}

  • Overrides all specificity rules
    Breaks CSS logic
    Makes maintenance difficult

    Real-life comparison:
    Emergency override button - useful, but dangerous.

    Use !important only as a last resort.

Practical Debugging Example (Specificity Issue)

When multiple CSS rules target the same element, the one with higher specificity wins. 

.card p {
  color: blue;
}

p {
  color: red;
}

  • .card p wins due to higher specificity

    Common Mistakes

    Overusing IDs for styling
    Using !important everywhere
    Ignoring specificity order
    Writing overly complex selectors

    Best Practices for CSS Specificity

    Prefer class selectors
    Avoid IDs for styling
    Keep selectors simple
    Let cascade work naturally
    Use !important only for utility overrides

    CSS rules compete
    Specificity decides the winner
    Inline > ID > Class > Element
    Same power → last rule wins

    CSS specificity decides which rule applies
    Inline styles have highest priority
    IDs override classes and elements
    Classes override elements
    Understanding specificity = clean, bug-free CSS

❮ Previous Next ❯