CSS Specificity Calculator

Calculate and compare the specificity score of CSS selectors.

Category: Dev Tools

When to use?

Use it when CSS styles do not apply as intended to see which selector wins, to compare several selectors, or to resolve style conflicts without !important.

How to use

  • Enter a CSS selector.
  • It computes the (ID, class·attribute·pseudo-class, element·pseudo-element) score.
  • Enter several selectors comma-separated to compare which one applies first.

Input Explanation

Enter CSS selectors. It supports ID (#), class (.), attribute ([]), pseudo-class (:hover), pseudo-element (::before), and :is()·:not()·:where().

Calculation Basis

It counts A (IDs), B (classes·attributes·pseudo-classes), and C (elements·pseudo-elements) per CSS specificity rules. :where() is 0; :is()·:not() take the highest value among arguments.

Usage Examples

  • Resolve style conflicts - Check by score which of two selectors applies first.
  • Compare selectors - Compare the priority of several selectors at a glance.
  • Learn CSS - Learn CSS priority concepts by seeing specificity rules as scores.

Examples

  • #nav ul.menu li a:hover → 1, 2, 3
  • .btn vs a:hover → compared in A·B·C order to judge priority

Cautions

  • Generated output is for reference; test carefully before production use.
  • Inline styles and !important have higher priority than selectors.

Guides

Specificity comparison rules

Compare in A (ID), B (class·attribute·pseudo-class), C (element·pseudo-element) order. A higher leading score wins regardless of the rest.

:is(), :not(), :where()

:where() forces specificity to 0; :is() and :not() take the highest specificity among the arguments. Inline styles and !important outrank selectors.

FAQ

How is priority compared?

In A (ID) → B (class etc.) → C (element) order; a higher leading score always wins.

Why is :where() 0?

:where() is a pseudo-class that forces specificity to 0, so its contents do not affect the score.

What about inline styles and !important?

This calculates only selector specificity. Inline styles and !important have higher priority.

How are :is() and :not() calculated?

Both take the highest specificity among the arguments inside the parentheses.

Related Tools

  • CSS Unit Converter - Convert px, rem, em, %, vw, and vh.
  • CSS Formatter - Neatly align CSS code by rules and properties.
  • Color Code Converter - Convert HEX, RGB, RGBA, HSL, HSLA color codes to each other and preview the color.
  • CSS clamp() Generator - Auto-generate a CSS clamp() function from min/max values and a viewport range.
  • Flexbox Generator - Adjust flex-direction, justify-content, align-items, and gap to generate Flexbox CSS.
  • JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.