Skip to main content

CSS Specificity Calculator

Calculate and compare CSS selector specificity scores. Understand style priority to improve your CSS architecture.

🎯

Add selectors to compare their specificity

How to Read Specificity

Inline
Direct styling via the style attribute
IDs
Targeting with #id
Classes / Attributes / Pseudo-classes
Targeting with .class, [attr], :hover, etc.
Elements / Pseudo-elements
Targeting with div, p, ::before, etc.
Share this tool
📖

How to Use

Step 1

Enter Selectors

Enter Selectors

Enter CSS selectors

Step 2

Calculate

Calculate

Specificity is calculated automatically

Step 3

View Results

View Results

Check specificity values and comparison

Features

Instant Calculation

Calculate specificity instantly as you type selectors

Selector Comparison

Compare specificity of multiple selectors side by side

Visual Display

Display specificity as (a, b, c) and bar graph

FAQ

A system determining selector priority: ID > class > element selectors.