CSS Specificity

CSS specificity determines which CSS rule takes priority when multiple selectors target the same HTML element.

What is CSS Specificity?

When more than one CSS rule applies to the same element, the browser needs to determine which rule should be used.

CSS specificity is one of the mechanisms used to decide which selector has greater priority.

Interactive Specificity Visual

Hover over each level to see its priority. Higher specificity generally gives a selector more priority when declarations compete for the same property.

1

Element Selector p, div, h1

10

Class / Attribute / Pseudo-Class .card, [type], :hover

100

ID Selector #header, #main

1000*

Inline Style style="..."

CSS Hierarchy

CSS specificity can be understood as a hierarchy of selector priority.

Basic Idea of Specificity

Basic Example

p {
    color: blue;
}

.text {
    color: red;
}

#message {
    color: green;
}

Suppose the same paragraph has the class text and the ID message. More than one rule matches the element.

<p id="message" class="text">
    Hello CSS
</p>

The ID selector has greater specificity than the class and element selectors, so the final text color becomes green.

Output

Specificity Levels

Class vs ID

.course {
    color: #2563eb;
}

#course {
    color: #7c3aed;
}

<p id="course" class="course">
    Learn CSS
</p>

Multiple Selector Specificity

Specificity can also be thought of as a combination of selector types rather than simply counting selectors.

p {
    color: blue;
}

.course p {
    color: red;
}

#main .course p {
    color: green;
}

Pseudo-Class Specificity

Pseudo-classes such as :hover, :focus, and :checked contribute to specificity similarly to class selectors.

.button:hover {
    background-color: #7c3aed;
}

Attribute Selector Specificity

input[type="text"] {
    border-color: #2563eb;
}

Attribute selectors contribute to specificity at the same general level as class selectors.

What about !important?

The !important annotation changes the normal cascade priority and should be used carefully.

.message {
    color: red !important;
}

Specificity and Source Order

When competing declarations have the same origin and specificity, the later applicable declaration can win through source order.

.title {
    color: #2563eb;
}

.title {
    color: #7c3aed;
}

Practical Example

Output

Specificity Comparison

CSS Specificity Best Practices

• Keep selectors as simple as possible.
• Avoid unnecessarily long selector chains.
• Prefer reusable classes for component styling.
• Avoid depending heavily on IDs for styling.
• Use !important only when there is a clear reason.
• Keep CSS organized so that overrides are predictable.

Real-World Uses

• Managing component styles
• Resolving conflicting CSS rules
• Building reusable UI components
• Maintaining large stylesheets
• Debugging unexpected styling