CSS Specificity

CSS specificity is the method browsers use to compare selectors when competing declarations have the same origin, importance, and cascade layer.

When more than one applicable declaration sets the same property on an element, specificity can help determine which declaration takes precedence. If competing selectors have equal specificity, the declaration that appears later in the applicable source order wins.

How Specificity Works

Specificity compares the selectors of competing CSS declarations. A selector with a higher specificity takes precedence over a selector with a lower specificity when the declarations are otherwise competing at the same stage of the cascade.

p {
  color: blue;
}
.notice {
  color: red;
}

If a paragraph has the notice class, both selectors match it. The class selector is more specific than the type selector, so the text is red.

<p class="notice">This paragraph is red.</p>

Specificity Categories

Selector specificity is commonly compared using three categories. Each category is considered from the most significant to the least significant.

ID selectors: Each ID selector, such as #content, adds to the ID category.

Class, attribute, and pseudo-class selectors: Selectors such as .notice, [type="email"], and :hover add to the next category.

Type and pseudo-element selectors: Type selectors such as p and pseudo-elements such as ::before add to the final category.

The universal selector (*) and combinators do not add specificity.

Comparing Specificity

Specificity is compared by looking at each category from left to right. A value in a more significant category takes precedence regardless of how many selectors appear in a less significant category.

p                 /* 0-0-1 */
.notice           /* 0-1-0 */
article .notice   /* 0-1-1 */
#message          /* 1-0-0 */

The #message selector has an ID selector, so it has greater specificity than the other selectors. The article .notice selector has the same number of class selectors as .notice, but it also contains a type selector, making it more specific.

These values are comparison categories, not ordinary decimal numbers. For example, several type selectors do not eventually become equivalent to one class selector.

Equal Specificity

When competing declarations have equal specificity and all earlier cascade considerations are equal, source order determines the result. The declaration that appears later takes precedence.

.message {
  color: blue;
}
.message {
  color: green;
}

Both selectors have the same specificity. Because the green declaration appears later, the matching text is green.

This is why the order of rules and stylesheets can matter even when their selectors have identical specificity.

Inline Styles

Styles written directly in an element's style attribute normally take precedence over normal author declarations written in stylesheets.

<p class="notice" style="color: green;">This paragraph is green.</p>

Even if a stylesheet contains a matching class or ID selector, a normal stylesheet declaration does not override the inline declaration solely by using a more specific selector.

Inline styles participate in the larger CSS cascade, so importance and other cascade rules must still be considered.

The !important Declaration

Adding !important to a declaration changes its importance within the cascade. It is not part of a selector's specificity.

.notice {
  color: blue !important;
}

When competing declarations are both important and belong to the same origin and cascade layer, specificity is used to compare their selectors.

Using !important unnecessarily can make CSS harder to override and maintain. It is generally better to understand why a declaration is losing in the cascade before using !important to override it.

CSS Specificity Example

The following example uses several selectors that match the same paragraph. Change or remove the selectors in the editor to see how specificity affects the result.

<style>
p {
  color: blue;
}
.message {
  color: green;
}
#special-message {
  color: red;
}
</style>

<p id="special-message" class="message">Which color will this paragraph use?</p>

Play in Editor

All three selectors match the paragraph, but the #special-message ID selector has the greatest specificity, so the paragraph is red.