CSS Specificity Calculator
Calculate selector specificity and understand which CSS rules win.
Enter a selector to see its specificity breakdown.
Common Selector Examples
Understanding CSS Specificity
CSS specificity determines which styles are applied when multiple rules target the same element. It's calculated as a tuple of three values: (IDs, Classes, Elements).
IDs
ID selectors like #header have the highest specificity weight.
Classes
Classes (.btn), attributes ([type]), and pseudo-classes (:hover).
Elements
Type selectors (div, p) and pseudo-elements (::before).
Specificity Rules
- 1.Compare from left to right: IDs beat any number of classes, classes beat any number of elements.
- 2.Universal selector (
*) and combinators (>,+,~) have no specificity. - 3.
:where()has zero specificity.:is(),:not(), and:has()use the specificity of their most specific argument. - 4.Equal specificity? The rule that appears later in the stylesheet wins.
Overriding Specificity
!important
The !important declaration overrides normal specificity rules. Use sparingly as it makes CSS harder to maintain.
.button {
color: red !important;
}
Inline Styles
Inline styles (written directly in HTML) have higher specificity than any selector. Only !important can override them.
Tips for Managing Specificity
- ✓Keep specificity low and consistent - prefer classes over IDs
- ✓Use BEM or similar naming conventions to avoid specificity wars
- ✓Avoid
!importantexcept for utility classes - ✓Use CSS layers (
@layer) for better control - ✗Avoid deeply nested selectors that increase specificity
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes