Calculate CSS specificity

Calculate and compare CSS selector specificity using the browser cascade tuple.

freeworks offlinenothing uploaded
ToolCSS Specificity Calculator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

ID, class/attribute/pseudo-class, and type tokens form a three-part specificity tuple; inline styles and !important are evaluated by cascade rules separately. Tuples compare lexicographically after origin and importance.

  • The tuple reflects browser cascade ordering.
  • Ties remain dependent on source order.

Worked example

Compare selector specificity
Calculate and rank three CSS selectors by specificity score
Input
											#header .nav a
.nav a:hover
div.container p
Output
												#header .nav a
  Specificity: (1, 1, 1)
  Score: 111
  IDs: 1, Classes/Attrs: 1, Elements: 1

.nav a:hover
  Specificity: (0, 2, 1)
  Score: 21
  IDs: 0, Classes/Attrs: 2, Elements: 1

div.container p
  Specificity: (0, 1, 2)
  Score: 12
  IDs: 0, Classes/Attrs: 1, Elements: 2


--- Sorted by specificity (highest first) ---

  (1, 1, 1) - #header .nav a

  (0, 2, 1) - .nav a:hover

  (0, 1, 2) - div.container p

When to use this

Override debugging, code reviews, and design-system guidance calculate specificity.

Edge cases

  • :where() contributes zero specificity.
  • :is() contributes its most specific argument.
  • !important changes precedence beyond the tuple.

References