Specificity Calculator

Enter a CSS selector to calculate its specificity weight.

CSS Selector

Inline Style !important

Specificty Tuple

(0, 0, 0, 0)

Inline 0

Style attributes

IDs 0

#id selectors

Classes 0

.class, [attr], :pseudo-class

Elements 0

element, ::pseudo-elem

History

Battle Arena

Compare two selectors to see which one wins.

Selector A

(0, 0, 0, 0)

VS

Selector B

(0, 0, 0, 0)

Specificity War Game

Test your knowledge. Which selector has higher specificity?

Score: 0

Streak: 0

OR

Specificity Reference

Quick guide to how CSS specificity is calculated.

Important & Inline

The ultimate overrides. Avoid if possible.

!important - Overrides everything
style="..." - 1,0,0,0 (Overrides IDs)

ID Selectors

High specificity. Target specific elements.

#header - 0,1,0,0
#nav #home - 0,2,0,0

Classes & Attributes

Medium specificity. Good for reusable styles.

.btn - 0,0,1,0
[type="text"] - 0,0,1,0
:hover - 0,0,1,0

Elements

Low specificity. Used for base styling.

div - 0,0,0,1
ul li - 0,0,0,2
::before - 0,0,0,1

Exceptions & Special Cases

Universal Selector (*) and combinators (+, >, ~, ' ') have 0 specificity.
:not(x), :is(x), :has(x) take the specificity of their most specific argument.
:where(x) always has 0 specificity, regardless of its arguments. Useful for resetting styles!

Specificity Calculator

History

Battle Arena

Selector B Wins!

Specificity War Game

Correct!

Specificity Reference

Important & Inline

ID Selectors

Classes & Attributes

Elements

Exceptions & Special Cases