CSS Specificity Calculator

Score one or more CSS selectors and see which one wins the cascade.

Selectors (one per line)

Selector	a (IDs)	b (cls/attr/pc)	c (type/pe)	Score
#nav .item a:hover	1	2	1	1, 2, 1 ✓
.btn.primary	0	2	0	0, 2, 0
ul li	0	0	2	0, 0, 2
:is(h1, .heading)	0	1	0	0, 1, 0
:where(.foo)	0	0	0	0, 0, 0
[type="text"]	0	1	0	0, 1, 0
nav > ul li.active a::before	0	1	5	0, 1, 5

</>Use this tool programmaticallycurl · JavaScript · MCP

Same tool, callable from any HTTP client or from Claude (via MCP). Anonymous: 100 req/day per IP. Sign up for 1,000 req/day.

curl

curl https://api.b-e-a-d.com/tools/css-specificity/run \
  -H "Content-Type: application/json" \
  -d '{
  "selectors": "a"
}'

JavaScript (fetch)

const res = await fetch("https://api.b-e-a-d.com/tools/css-specificity/run", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
  "selectors": "a"
}),
});
const data = await res.json();
console.log(data.result);

MCP (Claude Desktop / Claude Code)

# In Claude Desktop / Claude Code, add to your MCP config:
{
  "mcpServers": {
    "bead": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.b-e-a-d.com"]
    }
  }
}

# Then ask Claude to call:
mcp__bead__bead_css_specificity

Full reference: developer docs · OpenAPI spec

How specificity works

CSS specificity is a 3-tuple (a, b, c) compared left-to-right:

a — ID selectors (#id)
b — class, attribute, and pseudo-class selectors (.cls, [attr], :hover)
c — type and pseudo-element selectors (div, ::before)

:not(X) and :is(X) take the maximum specificity of their arguments; :where(X) always contributes zero. *and combinators don't count. Inline styles beat selectors; !important beats everything except a later !important.

How specificity works

You might also like