Calculate Which CSS Selector Wins
Paste competing selectors and the tool scores each one as ID, class, and type components, then highlights the winner so you know which rule applies.
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 one CSS selector per line
- 2Read the A, B, C specificity score for each
- 3Compare the color-coded bars side by side
- 4The highest specificity selector is marked the winner
More Calculate Tools
All calculators →Standard Deviation Calculator Online
Calculate sample and population standard deviation, variance, and mean from your data. Free online calculator with step-by-step working and charts.
Mean, Median, and Mode Calculator
Calculate the mean, median, mode, and range of a data set online for free. Includes quartiles, charts, and step-by-step working in your browser.
Scientific Calculator Online Free
A free scientific calculator with sin, cos, tan, log, factorial, and full expression input. Switch between degrees and radians, no download required.
Bitwise XOR Calculator Online
Calculate the bitwise XOR, AND, OR, NOT, and shifts of two numbers in decimal, hex, or binary. Results in all bases with a visual bit grid. Free tool.
Calculate Percentages Online
Calculate percentages, percentage change, and percentage of a number. Free online percentage calculator with multiple modes.
Calculate Your Exact Age Online
Calculate your exact age in years, months, days, hours, and minutes from your birthdate. Free online age calculator.
Looking for FAQs and advanced options? Visit the full CSS Specificity Calculator page →