CSS Specificity Calculator
Calculate selector specificity score
Enter selectors separated by lines or commas. Scores are ID, class/attribute/pseudo-class, type/pseudo-element counts; the full cascade also considers origins and layers.
The full guide also includes pitfalls, worked examples, snippets, FAQs, and related tools for checking results or troubleshooting.
About this tool
Parse selectors and calculate ID, class/attribute/pseudo-class, and type/pseudo-element specificity columns. Lines and comma-separated selector lists are evaluated individually, including :where(), :is(), :not(), :has() and nth-child(... of ...). Standalone nesting (&) is rejected because its parent context is missing.
Production Snippets
Modern selector specificity examples
text
:where(#app) .card => 0,1,0
:is(#app, .card)::before => 1,0,1
li:nth-child(2n of #featured, .item) => 1,1,1
a, #nav => separate 0,0,1 and 1,0,0 rowsFrequently Asked Questions
How do I compare a,b,c?
Compare columns lexicographically from left to right: IDs first, then classes/attributes/pseudo-classes, then types/pseudo-elements. It is not a decimal number; 0,10,0 remains below 1,0,0.
How are :where(), :is(), :not() and :has() counted?
:where() and its arguments add zero. :is(), :not() and :has() use the highest specificity among their selector arguments rather than adding a pseudo-class point of their own.
Do pseudo-elements and nth-child use the same rule?
Pseudo-elements such as ::before count in c. :nth-child() contributes a pseudo-class in b and, when an of selector list is present, also the highest specificity in that list.
Does a higher score always determine the winning style?
No. Relevance, origin and importance, cascade layers and other cascade rules are considered too. Specificity is compared only at the applicable stage; scoped proximity and source order can break later ties.
Does parsing validate browser support?
No. It computes specificity for parsed selectors without a DOM or stylesheet context. Parser-detected syntax errors and standalone & are reported, but a parsed selector may still be unsupported or invalid in a target browser.
Keep browsing