CSS Specificity Calculator
Enter a selector, or a list of them, to see its specificity score broken down by ID, class and element.
About this tool
Specificity is scored as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) — a higher tuple always beats a lower one, compared left to right, regardless of how many of the lower-weight selectors there are.
The calculator follows the current Selectors Level 4 rules. :is(), :not() and :has() count as their most specific argument, :where() always counts as zero (handy for low-priority defaults), and :nth-child(2n of .item) adds the selector after “of”. The universal selector * and combinators (>, +, ~, spaces) add nothing. Each coloured chip shows which part of the selector contributed what; hover over one for details.
Specificity only decides between rules from the same origin and cascade layer: !important, @layer order and inline style attributes are checked first, and if specificity ties, the rule that comes last wins.