{"generatedAt":"2026-07-19T03:01:59.647Z","tool":{"id":"css-specificity-calculator","name":"CSS Specificity Calculator","description":"Calculate and visualize CSS selector specificity. Paste selectors to see specificity scores, compare multiple selectors, and understand which styles win.","category":"devtools","icon":"⚖️","keywords":["css specificity calculator","specificity score","css selector weight","css cascade calculator","selector priority checker","css specificity checker"],"isNew":true,"remoteCallable":true,"remoteMode":"dedicated_api","riskClass":"L","maxInputBytes":131072,"timeoutMs":2000,"supportsStreaming":false,"url":"/css-specificity-calculator/","tags":["devtools"],"faqs":[{"question":"What is CSS Specificity Calculator?","answer":"CSS Specificity Calculator computes the specificity score of any CSS selector and displays it as a (inline, id, class, element) tuple. It also compares multiple selectors visually so you can immediately see which rule wins in a cascade conflict."},{"question":"How do I use CSS Specificity Calculator?","answer":"Paste one or more CSS selectors — one per line — into the input. The tool immediately shows specificity scores, color-coded token breakdowns (IDs in red, classes/attributes in green, elements in blue), and a bar chart comparing all selectors."},{"question":"Is CSS Specificity Calculator free?","answer":"Yes. This tool is free to use with immediate access—no account required."},{"question":"Does CSS Specificity Calculator store or send my data?","answer":"No. All processing happens entirely in your browser. Your selectors never leave your device — nothing is sent to any server."},{"question":"Why does my selector lose even though it looks more specific?","answer":"Specificity is calculated as (inline, id, class/attr/pseudo-class, element/pseudo-element). An ID selector always beats any number of class selectors. Source order only matters when two selectors have identical specificity. Check the calculator output to see exactly which component is lower."}],"howTo":[{"title":"Paste your CSS selectors","description":"Type or paste one selector per line into the input area. You can compare as many selectors as you need — the tool evaluates each one independently."},{"title":"Read the specificity tuple","description":"Each result shows the selector's specificity as (inline, id, class, element). Higher numbers in earlier positions always win — (0,1,0,0) beats (0,0,99,0)."},{"title":"Read the color-coded token breakdown","description":"IDs appear in red, classes/attributes/pseudo-classes in green, and elements/pseudo-elements in blue. This shows exactly what's contributing to the score."},{"title":"Sort by specificity to find the winner","description":"Click 'Sort by specificity' to rank all selectors from highest to lowest. The winning selector is highlighted with a 'wins' badge."},{"title":"Fix cascade conflicts","description":"If a rule is unexpectedly overriding another, compare their specificity tuples. You may need to add an ID selector, or refactor to lower the winning rule's specificity rather than escalating."}],"agentContract":{"toolId":"css-specificity-calculator","contractVersion":"2.0.0","remote_callable":true,"remote_mode":"dedicated_api","risk_class":"L","max_input_bytes":131072,"timeout_ms":2000,"supports_streaming":false,"preferred_surface":"dedicated_api","dedicated_api":{"baseUrl":"https://aidevhub.io/api/css-specificity-calculator/","openapiUrl":"https://aidevhub.io/api/openapi.yaml","endpoints":[{"method":"GET","path":"/api/css-specificity-calculator/","summary":"GET css-specificity-calculator"},{"method":"POST","path":"/api/css-specificity-calculator/","summary":"POST css-specificity-calculator"}],"riskClass":"L","inputMaxBytes":131072,"timeoutMs":2000},"runtime":{"endpoint":"/api/tools/run/","methods":["GET","POST"],"queryParams":[{"name":"toolId","required":true,"description":"Tool identifier"},{"name":"a","required":true,"description":"Primary input"}],"postBodyShape":{"toolId":"string","input":"{ a, b?, c?, mode? }"},"exampleGet":"https://aidevhub.io/api/tools/run/?toolId=css-specificity-calculator&a=...","policy":{"riskClass":"L","limit":60,"burst":20,"windowSec":60,"inputMaxBytes":131072,"timeoutMs":2000,"cacheTtlSec":0,"networkEnabled":false,"supportsStreaming":false}}},"relatedTools":[{"id":"cli-ux-linter","name":"CLI UX Linter","url":"/cli-ux-linter/","category":"devtools"},{"id":"ai-cli-generator","name":"AI CLI Generator","url":"/ai-cli-generator/","category":"devtools"},{"id":"csv-endpoint-builder","name":"CSV Endpoint Builder","url":"/csv-endpoint-builder/","category":"devtools"},{"id":"openprose-flow-linter","name":"OpenProse Flow Linter","url":"/openprose-flow-linter/","category":"devtools"},{"id":"trace-context-validator","name":"Trace Context Validator","url":"/trace-context-validator/","category":"devtools"},{"id":"retry-idempotency-contract-builder","name":"Retry & Idempotency Contract Builder","url":"/retry-idempotency-contract-builder/","category":"devtools"}]}}