CSS BATTLE

Calculator Mode

Streak: 0 (Best: 0)

RED TEAM

!important

0

Inline

0

IDs

0

Classes

0

Elements

0

VS

Who wins?

BLUE TEAM

!important

0

Inline

0

IDs

0

Classes

0

Elements

0

WINNER: RED TEAM!

Red team won because it has more ID selectors (1 vs 0).

How to Play

Welcome to the arena! Here's how CSS Specificity is scored, from strongest to weakest:

!important Trumps everything else.
Inline Styles directly on the element (e.g., style="...").
IDs E.g., #header
Classes/Attrs/Pseudos E.g., .btn, [type="text"], :hover
Elements/Pseudos E.g., div, p, ::before

Calculator Mode: Paste any two selectors to see why one overrides the other.

Practice Mode: Test your skills. Guess which random selector wins to build your streak!