CSS Specificity

CSS Specificity

CSS specificity helps the browser determine which selector takes precedence when multiple CSS rules target the same element and attempt to set the same property. More specific selectors generally take precedence over less specific selectors.

Why Specificity Matters

Different CSS selectors can target the same HTML element. When competing declarations have the same origin and importance but set the same property to different values, selector specificity helps determine which declaration takes precedence.

p {
  color: blue;
}

.notice {
  color: red;
}

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

Both selectors target the paragraph, but the class selector .notice is more specific than the element selector p. The paragraph is therefore red.

Element Selectors

Element selectors target HTML elements by their element name. They have lower specificity than class and ID selectors.

p {
  color: blue;
}

This rule applies to <p> elements unless another applicable declaration takes precedence in the cascade.

Class Selectors

A class selector is more specific than an element selector. This means a class selector can take precedence even when the element selector appears later in the stylesheet.

.notice {
  color: red;
}

p {
  color: blue;
}

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

The paragraph remains red. The later p rule does not win because .notice has greater specificity.

ID Selectors

An ID selector has greater specificity than a class selector or an element selector.

#message {
  color: green;
}

.notice {
  color: red;
}

p {
  color: blue;
}

<p id="message" class="notice">This paragraph is green.</p>

All three selectors target the paragraph, but the ID selector #message has the greatest specificity of the three.

Inline Styles

A normal declaration in an inline style attribute takes precedence over normal declarations from selectors in a stylesheet.

<p id="message" style="color: purple;">This paragraph is purple.</p>

#message {
  color: green;
}

Even though the stylesheet uses an ID selector, the normal inline declaration takes precedence and the paragraph is purple.

Combining Selectors

Selectors can contain more than one component. The specificity of the complete selector is determined by the selectors it contains.

p.notice {
  color: red;
}

.notice {
  color: blue;
}

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

The selector p.notice contains both an element selector and a class selector, making it more specific than .notice alone.

This is why simply thinking that IDs beat classes and classes beat elements is useful for getting started, but it is not the complete specificity system. CSS compares the components that make up each selector.

Equal Specificity

If competing declarations have equal specificity and the other cascade factors are also equal, source order determines which declaration takes precedence. The declaration that appears later wins.

.notice {
  color: blue;
}

.notice {
  color: red;
}

Both selectors have exactly the same specificity. Because the red declaration appears later, the text is red.

Specificity and !important

The !important flag affects the importance of a declaration in the cascade. It should not be thought of as simply adding more specificity to a selector.

p {
  color: blue !important;
}

#message {
  color: red;
}

<p id="message">This paragraph is blue.</p>

The blue declaration is important while the red declaration is normal, so the blue declaration takes precedence even though #message has greater selector specificity.

If competing declarations are both marked !important, specificity can then help determine which important declaration takes precedence.

Keeping Specificity Simple

Specificity can become complicated when stylesheets contain long selectors, many overrides, and frequent use of !important. For basic HTML and CSS, you can avoid much of that complexity by keeping selectors simple and using classes for styles that need to be reused.

When a style is not being applied as expected, check which selectors target the element, whether they set the same property, how specific those selectors are, and where competing declarations appear in the stylesheet.

You do not need to calculate specificity values for every rule you write. Understanding the basic relationship between element, class, ID, and inline styles is enough to recognize many common CSS conflicts.

Summary

CSS specificity compares selectors when competing declarations need to be resolved. Element selectors have less specificity than class selectors, while ID selectors have greater specificity than classes. Normal inline declarations take precedence over normal stylesheet declarations.

When specificity is equal and the other cascade factors are also equal, source order determines the result. Specificity is one part of the CSS cascade, not a separate replacement for it. The next tutorial looks at CSS inheritance and how some property values can pass from parent elements to their descendants.