Add selectors that target the same element and watch them battle for control.
Battle Arena
<div class="target">
I'm the target element — what happens to me?
No selectors yet. Add one below or load a preset to start a battle.
Specificity Breakdown
Specificity Scale
Type
Score
Example
ID
1-0-0
#main
Class
0-1-0
.active
Attribute
0-1-0
[href]
Element
0-0-1
div
Universal
0-0-0
*
Cheat Sheet
!important
Overrides all
Inline style
1-0-0-0
#id
1-0-0
.class + p
0-1-1
div p
0-0-2
Quick Tips
Order matters: When specificity ties, the later rule wins.
Combine counts:.a .b = 0-2-0, not 0-1-0.
Descendants count:div .class = 0-1-1.
Pseudo-classes::hover = 0-1-0.
Pseudo-elements:::before = 0-0-1.
🏆 Challenge Mode
Score: 0 / 0
Click Next Challenge to start testing your specificity knowledge!
⚡ Quick Presets
About Style Clash
Why this project?
CSS specificity is one of the most commonly misunderstood concepts in web development. Developers spend countless hours debugging "why isn't my style applying?" — only to discover that another selector with higher specificity is overriding their rule. There are plenty of specificity calculators, but none let you fight selectors against each other to see the cascade in action.
What is it?
Style Clash is an interactive CSS specificity battle arena. You add CSS selectors that target the same element, each with a different style property. The arena calculates each selector's specificity score and determines which one wins — coloring the target element accordingly. It includes a reference guide, challenge mode with quizzes, and preset battles that demonstrate common specificity gotchas.
How does it work?
The specificity engine parses CSS selectors using a recursive algorithm that breaks down each selector into its components: IDs (100 points), classes/attributes/pseudo-classes (10 points), and elements/pseudo-elements (1 point). The parser handles combinators (descendant, child, adjacent, general sibling), pseudo-selectors, attribute selectors, and the universal selector. The highest specificity wins; ties are broken by declaration order (last one wins).
How to use it
Manual mode: Type a CSS selector and a property:value in the input fields, then click "Add" to enter the arena.
Watch the battle: The target element updates in real-time to reflect the winning selector's style. Cards are color-coded: green = winner, red = loser.
Presets: Click any preset button to load a pre-configured battle that demonstrates a specific concept.
Challenge mode: Answer multiple-choice questions about specificity. Select your answer and submit to check.
Reference panel: The right sidebar shows the specificity scale, cheat sheet, and tips at a glance.
Clear / Random: Clear all selectors to start fresh, or generate a random fight with one click.