Tools Guides
Developer Free No signup

CSS Specificity Calculator

Calculate and compare CSS selector specificity (A, B, C).

Loading tool…

About this tool

Paste any CSS selector and instantly see its specificity score broken down into (A, B, C): A for ID selectors, B for classes/attributes/pseudo-classes, and C for type selectors/pseudo-elements. Compare two selectors to determine which one wins. Each part of the selector is highlighted and labeled so you understand exactly why a rule takes precedence. Includes common selector examples for quick reference.

How to use

  1. 1 Type or paste a CSS selector into the input field.
  2. 2 See the (A, B, C) specificity score and a color-coded breakdown instantly.
  3. 3 Use the Compare mode to enter two selectors and find which one wins.
  4. 4 Review the selector breakdown to understand each contributing part.
  5. 5 Browse the examples section for common selectors and their specificity values.

Frequently Asked Questions

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}