CSS Specificity Calculator

Calculate the specificity (a, b, c) of CSS selectors and see which rule wins — supports :is(), :not(), :has() and :where().

How is CSS specificity calculated?

Specificity is a score of three numbers (a, b, c): a counts ID selectors, b counts classes, attributes and pseudo-classes, and c counts element types and pseudo-elements. Paste selectors one per line and the calculator scores each and sorts them so you can see which rule wins.

Rules to remember

Compare a first, then b, then c — one ID (1,0,0) beats any number of classes (0,15,0).
When specificity is equal, the rule that comes last wins.
:where() always adds 0; :is(), :not() and :has() count their most specific argument.
The universal selector * and combinators (>, +, ~) add nothing.
Inline styles beat selectors, and !important beats both.

Frequently asked questions

Why is my CSS not applying?

Another rule probably has higher specificity or comes later. Compare them here.

How do I lower specificity?

Use single classes, avoid IDs in CSS and wrap selectors in :where().

Is it free?

Yes.