CSS Specificity Calculator

Enter a CSS selector to calculate its specificity score instantly. Add multiple selectors to compare them side by side.

Specificity Score (a, b, c, d)
0
Inline
Styles (a)
,
0
IDs (b)
,
0
Classes,
Attrs,
Pseudo-classes (c)
,
0
Elements,
Pseudo-elements (d)
(0, 0, 0, 0)
Inline (a)
0
IDs (b)
0
Classes (c)
0
Elements (d)
0

Selector Breakdown

Inline style
ID selector
Class / Attribute / Pseudo-class
Element / Pseudo-element
Combinator (not counted)

Selector Comparison — sorted by specificity

No selectors added yet. Enter a selector and click "+ Compare".

Common Examples — click to calculate

How CSS Specificity Works

a — Inline Styles
Style attributes on elements (style="..."). Highest specificity. Overrides all selectors in stylesheets.
b — ID Selectors
Selectors using #id. Very high specificity. One ID beats any number of classes or elements.
c — Classes, Attributes & Pseudo-classes
Class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :nth-child()).
d — Elements & Pseudo-elements
Type selectors (div, p) and pseudo-elements (::before, ::after). Lowest specificity.

Build grid layouts visually → CSS Grid Generator

Generate flexbox layouts → CSS Flexbox Generator