CSS Specificity

CSS specificity is a scoring system that decides which rule applies when more than one selector matches an element and sets the same property. It is one part of the cascade, alongside origin, importance and source order.

Why it matters

Most "why isn't my style applying" bugs are specificity conflicts. Understanding the scoring avoids stacking !important and unmanageable selectors. Specificity is compared as three counts, in order: IDs, then classes, attributes and pseudo-classes, then element types and pseudo-elements. A higher count in an earlier column always wins, and ties go to the rule that appears later.

Example

p              { color: black; }   /* 0,0,1 */
.note          { color: blue; }    /* 0,1,0 */
article .note  { color: green; }   /* 0,1,1 */
#intro         { color: red; }     /* 1,0,0 */

For <p id="intro" class="note"> inside an article, the red rule wins because one ID outranks any number of classes. Inline styles beat all of these, and the universal selector contributes nothing.

Common mistakes

• Using !important to escape a conflict, which invites more !important.
• Styling with IDs, which makes later overrides awkward.
• Writing deeply nested selectors, often from preprocessors.
• Forgetting that :where() adds zero specificity while :is() takes its most specific argument.

Related

• CSS selector
• Pseudo-class
• CSS
• Sass and SCSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.