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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.