Skip to main content
Back to Tools
Web Tools

CSS Specificity Calculator

Calculate CSS selector specificity following W3C rules. Compare multiple selectors side-by-side to find the winner. Supports :is(), :not(), :where(), pseudo-elements, and all selector types. Runs entirely in your browser — your data never leaves your machine.

css specificity selector cascade debugging

Published May 28, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Enter one or more CSS selectors (one per line). The tool calculates the specificity of each selector as an (a, b, c) tuple following W3C rules. When comparing multiple selectors, the most specific one is highlighted as the winner.

Features

  • Full W3C specificity rules: ID (a), class/attribute/pseudo-class (b), type/pseudo-element (c)
  • Functional pseudo-classes: :is() and :not() use their most specific argument; :where() contributes zero
  • Comparison mode: enter multiple selectors to see which wins the cascade
  • Visual breakdown: color-coded specificity boxes for each component
  • Human-readable explanations: understand why a selector has its specificity
  • 12 built-in examples: from universal to complex selectors
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Debugging CSS specificity conflicts
  • Understanding why one rule overrides another
  • Learning the specificity model with visual feedback
  • Comparing selectors before choosing the right approach