CSS Specificity Calculator
Calculate, visualize, and compare CSS selector specificity. Understand which styles win.
Single Selector
Compare Two Selectors
VS
Bulk Mode — Paste Multiple Selectors (one per line)
Calculation History
No calculations yet. Start typing a selector above.
Common Examples
Specificity Reference
| Selector Type | Specificity | Weight | Example |
|---|---|---|---|
| Inline styles | 1,0,0,0 | Highest | style="color: red" |
| ID selectors | 0,1,0,0 | High | #header, #main-nav |
| Class selectors | 0,0,1,0 | Medium | .active, .card-body |
| Attribute selectors | 0,0,1,0 | Medium | [type="text"], [data-id] |
| Pseudo-classes | 0,0,1,0 | Medium | :hover, :nth-child(2) |
| Element selectors | 0,0,0,1 | Low | div, p, h1, span |
| Pseudo-elements | 0,0,0,1 | Low | ::before, ::after |
| Universal (*) | 0,0,0,0 | None | *, + , > , ~ |
| :not() wrapper | 0,0,0,0 | None (contents count) | :not(.active) counts .active |
| !important | Overrides all | Absolute | color: red !important |
Key Rules: When two selectors have the same specificity, the one that appears last in the CSS wins.
!important declarations override normal specificity, but should be used sparingly. Inline styles (style="...") have higher specificity than any selector. The :not() pseudo-class itself has zero specificity, but its argument is counted. Combinators (>, +, ~, space) and the universal selector (*) do not affect specificity at all.
Unlock 100+ Premium Tools
Get the NexTool Pro with templates, workflows, and AI prompts for just $29.