css - Specificity
What is CSS Specificity?
CSS Specificity is a set of rules that browsers use to determine which CSS property values are applied to an element when there are multiple, potentially conflicting, styles. In essence, specificity is a measure of how specific a selector is.
For example, if you have multiple rules targeting the same element, the one with the highest specificity will be applied:
/* Example 1: Less specific */
p {
color: blue;
}
/* Example 2: More specific */
p.special {
color: red;
}
In the above example, the text in a paragraph with the class .special will be red, not blue, due to the higher specificity of .special.
How CSS Specificity Works
Specificity is calculated based on the types of selectors used. The more specific the selector, the higher its specificity score. The specificity of selectors is determined by a point system categorized as follows:
Inline Styles - Example: style="color: green;" (Highest specificity)
IDs - Example: #main
Classes, Pseudo-classes, and Attributes - Examples: .button, :hover, [type="text"]
Elements and Pseudo-elements - Examples: div, h1, ::after
Specificity Calculation
Specificity is represented by a four-part value, which can be thought of as (a, b, c, d):
a - Inline styles (style attribute) (e.g., style="color: blue;") → 1,0,0,0
b - IDs (e.g., #header) → 0,1,0,0
c - Classes, attributes, pseudo-classes (e.g., .btn, [type="text"], :focus) → 0,0,1,0
d - Elements, pseudo-elements (e.g., h1, ::before) → 0,0,0,1
Example Specificity Scores
/* Specificity: (0, 0, 0, 1) */
h1 {
color: blue;
}
/* Specificity: (0, 0, 1, 0) */
.button {
color: red;
}
/* Specificity: (0, 1, 0, 0) */
#main {
color: green;
}
/* Specificity: (1, 0, 0, 0) */
In this example:
h1 has a specificity of (0, 0, 0, 1)
.button has a specificity of (0, 0, 1, 0)
#main has a specificity of (0, 1, 0, 0)
Inline styles have the highest specificity (1, 0, 0, 0)
Understanding the Specificity Hierarchy
CSS rules with higher specificity will override those with lower specificity. Here's the hierarchy:
Inline Styles: Always have the highest priority.
ID Selectors: Next in priority after inline styles.
Class, Attribute, and Pseudo-class Selectors: These come after IDs.
Element and Pseudo-element Selectors: These have the lowest specificity.
How to Override CSS Specificity
Using !important
Adding !important to a CSS rule will force it to be applied, ignoring normal specificity rules:
p {
color: blue !important;
}
Note: Use !important sparingly, as it makes your CSS harder to debug and maintain.
Increasing Specificity
You can increase specificity by adding additional selectors:
/* Lower specificity */
.button {
background-color: red;
}
/* Higher specificity */
div .button {
background-color: green;
}
Using Inline Styles
Inline styles have the highest specificity but should be avoided in most cases for better maintainability:
Best Practices for Managing Specificity
Avoid using IDs for styling: Use classes instead, as they are reusable and less specific.
Use CSS Variables: They help reduce the need for overrides.
Avoid !important: Reserve it for utilities or overrides where absolutely necessary.
Maintain a consistent naming convention: Use methodologies like BEM (Block Element Modifier) for predictable specificity.
Keep selectors short and simple: Avoid overly specific selectors like ul.nav > li.active a.
Conclusion
Understanding CSS specificity is crucial for writing clean, maintainable, and efficient stylesheets. By following best practices and knowing how specificity is calculated, you can avoid common pitfalls and ensure your styles are applied as intended.
