CSS Specificity Calculator

Calculate CSS selector specificity as (a, b, c) tuples instantly. Compare multiple selectors, see visual breakdowns by ID, class, and element. Free, browser-based.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
Comma-separate multiple selectors to compare

Related Tools

UUID Generator Generate v4 UUIDs instantly — single or batch. Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. Regex Tester Test regular expressions in real time with match highlighting and capture group details. Timestamp Converter Convert Unix timestamps to human-readable dates and vice versa. Auto-detects seconds vs milliseconds. QR Code Generator Generate QR codes from URLs, text, Wi-Fi credentials, and more. Download as PNG. Cron Expression Parser Parse and explain cron expressions in plain English. Preview next 10 scheduled run times.

How to Use

  1. Type a CSS selector into the input field, for example #nav .item:hover.
  2. The specificity tuple (a, b, c) and a color-coded breakdown appear immediately.
  3. To compare selectors, separate them with commas: #nav .item, .item:hover.
  4. Click Copy next to any result to copy the tuple to the clipboard.

Reading the (a, b, c) Tuple

  • a — ID: Each #id selector adds 1 here.
  • b — Class / Attribute / Pseudo-class: Each .class, [attr], or :pseudo-class adds 1.
  • c — Element / Pseudo-element: Each tag name or ::pseudo-element adds 1.

Compare left to right. The first column where two selectors differ decides which one wins. (1,0,0) always beats (0,99,99).

Common Examples

  • * → (0, 0, 0)
  • p → (0, 0, 1)
  • .class → (0, 1, 0)
  • #id → (1, 0, 0)
  • #id .class:hover → (1, 2, 0)
  • div > p + span::before → (0, 0, 4)

FAQ

What is CSS specificity?

CSS specificity determines which style rule wins when multiple rules target the same element. It is expressed as a three-part tuple (a, b, c) where a counts ID selectors, b counts class/attribute/pseudo-class selectors, and c counts element type and pseudo-element selectors.

How is specificity calculated?

a = number of ID selectors (#id). b = number of class (.class), attribute ([attr]), and pseudo-class (:hover) selectors. c = number of element type (div, span) and pseudo-element (::before) selectors. The universal selector (*) and combinators (+, >, ~) contribute nothing.

How do I compare two selectors?

Enter both selectors separated by a comma. The tool shows each specificity tuple side-by-side. Compare a column-by-column left to right — higher value in the first differing column wins.

What about :not(), :is(), and :has()?

:not() and :is() take the specificity of their most specific argument. :where() always contributes zero specificity. :has() uses the specificity of its argument. This tool applies a simplified single-argument parse for these pseudo-classes.

Does inline style or !important count?

Inline styles (style attribute) sit above (a, b, c) and !important overrides everything. This tool only calculates selector specificity — inline styles and !important are out of scope.