{"uid":"cap_4TWVUoYcOP2Ke1puooNh2","slug":"css-selector-specificity-calculator-06a6ab50","name":"CSS Selector Specificity Calculator","description":"CSS selector specificity (ids, classes, types) per Selectors Level 4, including :is(), :not(), :where() and :has(); compare two.","url":"https://css-design-calc.x402tookit.com/css-specificity?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["selector"],"properties":{"selector":{"type":"string","description":"A selector or comma separated list, e.g. nav ul > li.active a:hover"},"compareTo":{"type":"string","description":"A second selector; says which wins in the cascade (same origin, no !important)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"valid":{"type":["boolean","null"]},"source":{"type":["null","string"]},"highest":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"selectors":{"type":["array","null"],"items":{"type":"object","properties":{"a":{"type":["null","number"]},"b":{"type":["null","number"]},"c":{"type":["null","number"]},"idCount":{"type":["null","number"]},"selector":{"type":["null","string"]},"typeCount":{"type":["null","number"]},"classCount":{"type":["null","number"]},"specificity":{"type":["null","string"]}}}},"comparison":{"type":["null","object"],"properties":{"first":{"type":["null","string"]},"detail":{"type":["null","string"]},"second":{"type":["null","string"]},"winner":{"type":["null","string"]}}},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"highestSelector":{"type":["null","string"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_cRiw6eYAsTw4hVITKuhrf","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Calculates CSS selector specificity (IDs, classes, types) per Selectors Level 4, including :is(), :not(), :where(), and :has(), and optionally compares two selectors to determine which wins in the cascade.","exampleAgentPrompt":"What's the specificity of nav ul > li.active a:hover, and does it beat #main .content p in the cascade?","exampleUseCases":[{"title":"Debug overriding CSS rule","prompt":"My rule .card .title isn't applying — can you calculate the specificity of .card .title and compare it to #sidebar .title so I know which one wins in the cascade?"},{"title":"Validate :is() and :where() specificity","prompt":"I'm using :is(nav, header) ul > li a and :where(nav, header) ul > li a — can you calculate the specificity of both so I understand how :where() changes things?"},{"title":"Audit complex selector before shipping","prompt":"Before I ship this stylesheet, can you tell me the specificity breakdown — IDs, classes, types — for the selector body.theme-dark main > article.post:not(.draft) h2?"}],"resultDescription":"Returns a structured object containing per-selector specificity breakdowns (a/b/c triple, ID count, class count, type count, formatted specificity string), a summary, and if a second selector is provided, a comparison object indicating which selector wins in the cascade, why, and the detail explanation. Also includes validity flags, any selectors not checked, and disclaimers.","failureModes":["Invalid or unparseable selector returns valid:false with reasons array explaining parse errors","Unsupported pseudo-classes may appear in notChecked array","Malformed comma-separated selector list may result in partial results","Missing required selector query parameter returns an error response","Very complex or deeply nested selectors may produce degraded:true with partial results"],"whenToPreferThis":"Use this endpoint when you need programmatic, standards-compliant CSS specificity computation per Selectors Level 4, especially when working with modern pseudo-classes like :is(), :not(), :where(), and :has() that have non-obvious specificity behavior. Prefer this over manual calculation for complex selectors or when debugging cascade conflicts between two competing rules.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T13:14:24.827Z","isFirstParty":false,"canonicalSlug":"css-selector-specificity-calculator-06a6ab50"}