CSS Specificity
Parse CSS selectors and visualize their specificity across inline, IDs, classes, and elements.
Free & unlimited
CSS selector
Try an example
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Enter a CSS selector
Type or paste one or more CSS selectors into the input field.
- 2
View specificity score
See the computed specificity as a three-part score (ID, Class, Element).
- 3
Compare selectors
Add multiple selectors to compare which one wins in a cascade conflict.
- 4
Understand the breakdown
Each part of the selector is highlighted to show what contributes to the score.
- Specificity is calculated as (IDs, Classes/Attributes/Pseudo-classes, Elements/Pseudo-elements).
- Inline styles override any selector specificity. !important overrides inline styles.
- Prefer lower-specificity selectors to keep your CSS maintainable and easy to override.
- Two selectors with equal specificity resolve by source order - the later one wins.
- Calculates specificity for any valid CSS selector including complex combinators
- Visual breakdown showing each component contribution
- Side-by-side comparison of multiple selectors
- Handles :is(), :where(), :not(), and :has() pseudo-classes correctly
- Highlights the winning selector when comparing
- Debug why a CSS rule is being overridden by another selector
- Compare competing selectors during a CSS refactor
- Teach CSS specificity to students with visual score breakdowns
- Audit a stylesheet for overly specific selectors that are hard to maintain
:where() always contributes zero specificity, making it useful for default styles that are easy to override.
No. The universal selector, combinators (+, >, ~), and :where() contribute zero specificity.
!important is not part of the specificity calculation - it creates a separate priority layer that overrides normal specificity entirely.