CSS Stats

Analyze a whole stylesheet on this device: rule, selector and declaration counts, a specificity graph, unique colors and font sizes, and !important totals.

0 bytes uploaded

Input — paste CSS to analyze

Analysis

—Rules
—Selectors
—Declarations
—Unique properties
—At-rules
—Media queries
—!important
—Size

Specificity graph

Specificity

Paste CSS to see stats as you type.

Selector (source order)

Properties

—

Colors

—

Font sizes

—

Font families

—

0 B · 0 lines

Press ? for shortcuts

Do it offline:$ npx wallace-cli styles.css

How to use it

Paste your CSS or drop a .css file — it is read on your device, and a very large sheet waits for a manual run.
Read the stat cards: rule, selector and declaration counts, unique colors and font sizes, and the !important total.
Scan the specificity graph for spikes, then use the point table below to read the exact three numbers and reveal a selector in your input.
Copy the report, download it as a .txt file, or open a linked tool from the Related list.

Paste a stylesheet and read it as numbers: how many rules, selectors and declarations it holds, a specificity graph plotting every selector in source order, the unique colors and font sizes it uses, and how often !important appears. css-tree does the parsing in a Web Worker on your device, so even a large sheet stays responsive and nothing you paste is uploaded.

How it works

css-tree reads your whole stylesheet in a Web Worker and walks it once, counting rules, selectors, declarations and at-rules. Each selector is scored the way the CSS Specificity Calculator scores one: ids feed the first number, classes and pseudo-classes the second, elements and pseudo-elements the third.

Read the graph as a shape, not a ranking. A flat line means selectors stay close in weight and the cascade is predictable; a sudden spike marks a rule that later rules will struggle to override, and is usually worth refactoring.

Colors and font sizes are counted as written text, not resolved values. #fff, #ffffff and white paint the same pixels yet count as three entries, so duplicate notations are easy to spot.

Examples

a{color:red}

1 rules, 1 selectors, 1 declarations, 0 !important
specificity
  a → 0,0,1
  highest → 0,0,1
colors (1 unique): red

One type selector, one declaration: a reads as 0,0,1 and the one color token is red.

.a,.b .c{}

1 rules, 2 selectors, 0 declarations, 0 !important
specificity
  .a → 0,1,0
  .b .c → 0,2,0
  highest → 0,2,0

The comma makes two selectors, each scored alone: .a is 0,1,0 and .b .c is 0,2,0, so the list plots two points and adds no total.

a{color:red}
#app .btn.btn--lg span{color:#FFF!important}

2 rules, 2 selectors, 2 declarations, 1 !important
specificity
  a → 0,0,1
  #app .btn.btn--lg span → 1,2,1
  highest → 1,2,1
colors (2 unique): red, #fff

The id-led #app .btn.btn--lg span reaches 1,2,1 and holds the one !important, so it tops the graph while the plain a stays at the floor.

a{color:#fff}b{color:#FFFFFF}c{color:white}

3 rules, 3 selectors, 3 declarations, 0 !important
specificity
  a → 0,0,1
  b → 0,0,1
  c → 0,0,1
  highest → 0,0,1
colors (3 unique): #fff, #ffffff, white

Three spellings of one white count as three unique colors, because the report compares the text you wrote, not the color it renders.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

Unique by notation, not by color

transparent and currentColor count as colors; the CSS-wide keywords inherit, initial and unset, and the value none, do not.

Keyframe steps are not selectors

The from, to and percentage steps inside @keyframes never enter the rule, selector or specificity totals; the @keyframes block is one at-rule, and its declarations still count.

Nested, @media and @supports rules count

A rule inside @media, @supports or a nesting block is a rule like any other, and its selectors are scored. @font-face adds declarations but is an at-rule, not a rule. A feature query like @supports (color: red) is a test, not a declaration.

Recovered errors give partial numbers

css-tree recovers on its own grammar, not a browser's, so the stats describe what survived; a note counts the skipped errors and sends you to the CSS Validator.

Shorthands and custom properties

The font shorthand is not split, so font: 14px/1.5 Arial adds no font-size or font-family entry. Custom properties and vendor-prefixed names are counted, --Brand and --brand stay separate because they are case-sensitive, and a color set in a custom property joins the color list.

Large sheets and invisible bytes

Above 5 MB the input is refused with a CLI hint. Lists cap at 256 entries and the graph at 20,000 points, yet the totals and the highest specificity still cover every selector. A leading byte-order mark is dropped and any unpaired surrogate becomes the U+FFFD replacement character, each called out with a note, so the counts and source offsets stay accurate.

Common errors

Input is larger than the 5 MB limit for this tool. For bigger files use the CLI: npx wallace-cli styles.css: The whole file is declined rather than analyzed in part, because counts and a graph built from half a stylesheet would mislead. The wallace CLI reads a file of any size on your machine.
1 parse errors — stats reflect the recovered stylesheet; check the CSS Validator.: css-tree drops what it cannot read and carries on under its own rules, not a browser's, so the numbers describe the recovered sheet. The note counts what was skipped and points you to the CSS Validator.
1 selectors could not be scored and were left off the specificity graph.: A few selectors are valid CSS yet too deeply nested for the scorer — dozens of :is() or :not() wrappers inside one another. They stay in the selector total but are kept off the graph.

FAQ

How do I read a CSS specificity graph?

Follow the line across your selectors in source order. Height is weight: a low, even line is healthy, and a tall spike is a selector that later rules will struggle to beat — open it and consider simplifying.

Does it count !important and unique colors across the whole stylesheet?

Yes. Every declaration in every rule, @media block and nested block is counted, so the !important total and the color and font-size lists describe the whole sheet, not just the first rule.

Is my CSS uploaded anywhere?

No. Parsing and every count run in this tab through a Web Worker, with no upload and no account, so unreleased design work stays on your device.

Keyboard shortcuts

⌘/Ctrl + Enter: Run the analysis now — needed for a very large sheet.
⌘/Ctrl + S: Save the analysis as a .txt file.
⌘/Ctrl + C: Copy the full report when no text is selected.
⌘/Ctrl + Shift + C: Force-copy the report whether or not text is selected.
t: Move to the next theme, ignored while a field has focus.
? or ⌘/Ctrl + /: Show these shortcuts in a help dialog.
Esc: Close the help dialog; the report and your input stay put.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

MDN — Specificity · W3C Selectors Level 4 — Calculating a selector's specificity · Project Wallace — css-analyzer (a reference analyzer in this category)

Last reviewed: 2026-08-10