中文

CSS Specificity Calculator

Calculate ID, class, and type specificity for selectors and selector lists.

CSS Specificity Calculator
Local input
Output
Processing…
Processed locally in your browserNo input history is saved
About this tool

Made for the task at hand.

Compare selector weights with support for modern functional pseudo-classes. The result uses the standard ID-class-type tuple.

How to use

  1. Enter one selector or a comma-separated selector list.
  2. Review each three-part specificity tuple.
  3. Compare the numeric ID, class, and type columns.
Your work stays yours.
Tool inputs are processed locally in your browser and are never sent to KitVerse servers. Clear the workspace when using a shared device.
Common questions
Does :where() add specificity?

No. :where() and its arguments contribute zero, while :is(), :not(), and :has() use their most specific argument.

Does this determine which style wins?

Only partly. Cascade layers, origin, importance, encapsulation, and source order also affect the winning declaration.

Related tools · Development

Free

Regex Tester

Test JavaScript regular expressions and inspect matches, groups, and indices.

Free

Regex Replacer

Replace text with JavaScript regex patterns and capture references.

Free

Chmod Calculator

Convert three-digit Unix permissions and symbolic owner/group/other clauses.