Specificity and cascade
Specificity and the cascade are fundamental CSS concepts that determine which styles are applied when multiple rules target the same element.
/* Specificity: Inline > ID > Class/Attribute/Pseudo-class > Element/Pseudo-element */This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
Specificity and the cascade are fundamental CSS concepts that determine which styles are applied when multiple rules target the same element.
Specificity and the cascade are the core mechanisms that CSS uses to resolve conflicts when multiple style rules apply to the same HTML element. The **cascade** dictates the order in which styles are applied, considering several factors: 1. **Origin**: Styles from the browser's user agent stylesheet, user-defined stylesheets, and author-defined stylesheets. 2. **Importance**: Rules marked with `!important` override normal rules (though generally discouraged). 3. **Specificity**: The most specific selector wins (calculated based on ID, class, and element count). 4. **Order of Appearance**: If specificity is equal, the last rule declared in the stylesheet (or the last imported stylesheet) wins.
**Specificity** is a weighted value calculated for each selector. It's often visualized as a four-part number `(a, b, c, d)`: - `a`: 1 if the style is inline (e.g., `<p style="...">`), 0 otherwise. - `b`: Number of ID selectors (e.g., `#my-id`). - `c`: Number of class selectors (e.g., `.my-class`), attribute selectors (e.g., `[type="text"]`), and pseudo-classes (e.g., `:hover`). - `d`: Number of element selectors (e.g., `p`, `div`) and pseudo-elements (e.g., `::before`).
Selectors with higher specificity override those with lower specificity. For example, an ID selector (`#id`, specificity `(0,1,0,0)`) is always more specific than a class selector (`.class`, specificity `(0,0,1,0)`), which is more specific than an element selector (`p`, specificity `(0,0,0,1)`). Understanding these rules is crucial for debugging unexpected styling issues and writing predictable, maintainable CSS.
Quick reference
Syntax
/* Specificity: Inline > ID > Class/Attribute/Pseudo-class > Element/Pseudo-element */See it in practice
Examples
Specificity: ID vs. Class vs. Element
<style>
#my-paragraph { color: red; } /* (0,1,0,0) */
.text-blue { color: blue; } /* (0,0,1,0) */
p { color: green; } /* (0,0,0,1) */
</style>
<p id="my-paragraph" class="text-blue">This text will be red.</p>The paragraph text will be red.
The ID selector (`#my-paragraph`) has the highest specificity, overriding the class (`.text-blue`) and element (`p`) selectors, even though the class is declared later.
Cascade: Order of Appearance (equal specificity)
<style>
.my-text { color: red; }
.my-text { color: blue; } /* This rule comes last */
</style>
<p class="my-text">This text will be blue.</p>The paragraph text will be blue.
Both rules have the same specificity (class selector). According to the cascade, the last declared rule (`color: blue;`) wins.
Inline styles overriding external/internal styles
<style>
#my-element { background-color: blue; }
</style>
<div id="my-element" style="background-color: green;"></div>The div will have a green background.
Inline styles have the highest specificity (represented by `(1,0,0,0)`), always overriding styles from internal or external stylesheets, unless `!important` is used.
Combining selectors for higher specificity
<style>
.container p { color: red; } /* (0,0,1,1) */
div .highlight { color: blue; } /* (0,0,1,1) */
.container .highlight { color: green; } /* (0,0,2,0) - more specific */
</style>
<div class="container">
<p class="highlight">This text will be green.</p>
</div>The paragraph text will be green.
The selector `.container .highlight` has two class selectors, giving it a higher specificity than the other rules, thus its style wins.
Debug faster
Common Errors
Unintended Overrides
Cause: Styles not applying or being overridden by other rules due to a misunderstanding of specificity or the cascade order.
Fix: Use browser developer tools to inspect the element and see which CSS rules are being applied and why. Understand the specificity of your selectors and refactor them to be more or less specific as needed. Avoid `!important` unless absolutely necessary.
p { color: red; }
.my-text { color: blue; }
<p class="my-text">Text is blue, not red, because .my-text is more specific.</p>Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
Specificity and the cascade are fundamental CSS concepts that determine which styles are applied when multiple rules target the same element.
Unintended Overrides: Use browser developer tools to inspect the element and see which CSS rules are being applied and why. Understand the specificity of your selectors and refactor them to be more or less specific as needed. Avoid `!important` unless absolutely necessary.