New free tool

CSS Specificity Calculator for Selectors

Compare selector weight when debugging the cascade, refactoring CSS, or reviewing design system overrides.

Quick answer

CSS specificity compares selector weights in ID, class-like, and element-like groups.

Higher scores usually win when competing rules apply to the same element.

Best inputs

Paste complete selectors

Include IDs, classes, attributes, pseudo-classes, and elements exactly as used in CSS.

Compare close matches

The tool is most useful when two selectors target the same component state.

CSS selectors

Paste one selector per line, or comma-separated selector lists.

Try a common specificity check

Selectors

Specificity results

Scores use the common ID, class, element format.

Selectors

Strongest

1-1-1

Format

A-B-C

Score	IDs	Classes	Elements	Selector
1-1-1	1	1	1	#app .card > h2
0-3-0	0	3	0	.button.primary:hover
0-2-3	0	2	3	main article.post[data-state="published"] h1
0-1-2	0	1	2	:where(.shell) nav a[aria-current="page"]
0-1-1	0	1	1	:is(header, main, footer) .link

1-1-1  #app .card > h2
0-3-0  .button.primary:hover
0-2-3  main article.post[data-state="published"] h1
0-1-2  :where(.shell) nav a[aria-current="page"]
0-1-1  :is(header, main, footer) .link

Specificity scores are calculated for common selectors. Cascade layers, source order, inheritance, and browser support can still change the final applied style.

Example

Compare #app .button:hover with .card .button.primary to see which selector carries more cascade weight.

Assumption

Scores use the common A-B-C model: IDs, class-like selectors, and element-like selectors.

Limitation

Specificity is only one cascade factor. Source order, cascade layers, importance, inheritance, and shadow DOM can also matter.

Suggested workflow