Free Online CSS Specificity Calculator

Calculate and visualize CSS selector priority instantly.

Real-time Parsing

Quick Examples

How it works

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

IDs #id-name
Classes .class, [attr], :pseudo-class
Elements div, p, ::pseudo-element

Specificity Score

0
Inlines
,
0
IDs
,
0
Classes
,
0
Elements

Detailed Breakdown

Start typing to see breakdown...
Copied to clipboard!