CSS Specificity Calculator Online
Enter any CSS selector and see its specificity score broken down by ID, class, and element components. Debug CSS cascade issues and understand why one rule overrides another.
CSS Specificity Calculator
Calculate and compare CSS selector specificity scores
Enter one selector per line. Comma-separated selectors are treated individually.
No selectors entered
Type CSS selectors above or click to get started.
Specificity Quick Reference
| Selector Type | Example | Specificity | Score |
|---|---|---|---|
| Universal | * | (0,0,0) | 0 |
| Type / Element | div | (0,0,1) | 1 |
| Pseudo-element | ::before | (0,0,1) | 1 |
| Class | .card | (0,1,0) | 10 |
| Attribute | [type] | (0,1,0) | 10 |
| Pseudo-class | :hover | (0,1,0) | 10 |
| ID | #main | (1,0,0) | 100 |
| :where() | :where(#x) | (0,0,0) | 0 |
| :is() / :not() / :has() | :is(#x, .y) | (1,0,0) | 100 |
- :is(), :not(), :has() take the specificity of their most specific argument, not their own. The functional pseudo-class itself adds nothing.
- :nth-child(An+B of S),
:host()and:host-context()count as a pseudo-class plus the most specific selector in their argument. - !important declarations win over normal declarations regardless of specificity (they sit in a higher cascade layer, not the specificity tuple).
- Inline styles (the
styleattribute) beat any selector. Conceptually they rank above the (a,b,c) tuple. - Combinators (
>+~) and the universal selector*add no specificity.
Specificity Levels
Quick Start
- 1Enter a CSS selector (e.g. #main .nav > a:hover)
- 2The specificity score is calculated instantly
- 3Review the ID, class, and element breakdown
- 4Compare multiple selectors to find the winner
More Calculate Tools
All calculators →Calculate 16:9 Aspect Ratio Dimensions Online
Work out 16:9 width and height pairs and resize without distortion. Free 16:9 aspect ratio calculator with presets for video and screens, no signup.
Calculate Percent Off a Price Online
Work out a discount and final price from a percent off. Free percent off calculator for sales and coupons, no signup.
Calculate a Tip Amount Online
Figure a tip and total from any percentage. Free tip calculator for restaurant bills and services, no signup.
Calculate Age in Days Online
Find your exact age in days from your date of birth. Free age in days calculator that also shows weeks and hours, no signup.
Calculate a chmod Permission Online
Build Unix file permissions and the chmod command visually. Free chmod calculator with octal and rwx output, no signup.
Calculate CIDR to Subnet Mask Online
Convert a CIDR prefix to a dotted-decimal subnet mask and wildcard mask. Free online CIDR to subnet mask calculator.
Looking for FAQs and advanced options? Visit the full CSS Specificity Calculator page →