CSS Specificity Calculator — Free Online Tool Calculate CSS selector specificity locally and compare ID, class, attribute, pseudo-class, and type selector weight.
Use this free online CSS Specificity Calculator directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is CSS Specificity Calculator? CSS specificity is the tuple browsers use to compare competing declarations after origin and importance are considered. It counts ID selectors first, then classes, attributes, and pseudo-classes, and finally type selectors and pseudo-elements. This calculator displays that tuple for each pasted selector, making selector weight visible when debugging a cascade conflict.
Specificity is compared lexicographically, not by adding the numbers together: one ID selector outranks any number of class or type selectors. It is also not the first cascade decision, because origin, importance, and cascade layers are considered earlier. When possible, solve conflicts with intentional layering and component scope instead of increasingly specific selectors.
Why use specificity calculator? A declaration may fail to apply because another rule has greater specificity or appears later with equal specificity. Calculating tuples removes guesswork and helps developers choose a simpler, maintainable override instead of escalating with !important.
When to use specificity calculator Use it while debugging CSS conflicts, reviewing component styles, or teaching the cascade. Specificity is only one part of the cascade: importance, origin, cascade layers, scope, and source order can still decide the winner.
How to use specificity calculator Enter one selector per line and compare the resulting tuples from left to right.
Paste competing selectors: Use the exact selectors from rules that target the same element.Read the tuple: Values represent IDs, classes, attributes, pseudo-classes, types, and pseudo-elements.Compare in order: The first differing component wins; an ID beats any number of classes.Inspect the full cascade: When tuples tie, use DevTools to check layers, importance, scope, and source order.Key features Selector comparison: Calculates a three-part specificity tuple for each non-empty selector.Local calculation: Keeps selectors in the browser rather than sending style code to a service.Copyable result: Lets debugging notes preserve selectors and their weights.Common use cases Component overrides: Understand why an application rule loses to a component selector.CSS review: Spot unnecessary IDs and long chained selectors before they create an override burden.Cascade education: Demonstrate why 0, 3, 0 does not beat 1, 0, 0.Examples Class selector .card .title0, 2, 0ID selector #app .card1, 1, 0Attribute and pseudo-class button[data-state=active]:hover0, 2, 1Technical reference Specificity is an ordered tuple, not a single total score.
ID component Each #id selector increases the first value. Class component Each class, attribute selector, and pseudo-class increases the second value. Type component Each type selector and pseudo-element increases the third value. Universal selector The universal selector contributes no specificity. Importance !important is considered before specificity and is not part of the tuple. Source order Later declarations decide only after earlier cascade stages and specificity tie. Common mistakes to avoid Adding selector values as one number Why it happens: Specificity is lexicographic: 1, 0, 0 beats 0, 100, 100.
How to avoid it: Compare from IDs through type selectors and stop at the first difference.
Using !important as a routine override Why it happens: It changes the importance stage and makes later changes harder.
How to avoid it: Prefer intentional layers, component boundaries, or a selector with the real scope.
Ignoring source order after a tie Why it happens: Identical tuples can still produce different results based on declaration order.
How to avoid it: Use browser DevTools to inspect the complete cascade when tuples are equal.
Frequently asked questions Does !important change specificity? No. It changes the importance stage that is considered before specificity.
Does source order matter? Yes, when earlier cascade criteria and specificity are tied.
Are pseudo-elements included? They count in the type-selector component.
Does an inline style have a tuple? Inline declarations have higher author specificity than ordinary selector rules, subject to importance and other cascade stages.
Does :where() add specificity? No. :where() has zero specificity, while other functional pseudo-classes have rules based on their arguments.
Does this decide the final winning rule? No. It compares selector tuples; the browser cascade also considers origin, importance, layers, scope, and source order.
Privacy and availability Runs entirely in your browser — zero server processing No signup or account required Works offline once loaded Fast, lightweight, no external dependencies Available as a browser extension for Chrome and Firefox Tags CI/CD CSS Related tools All developer tools JSON Beautifier & Validator — Format, minify and validate JSON. Reports the exact error location.HTML Beautifier & Minifier — Indent or minify HTML. Content of pre/script/style is preserved.CSS Beautifier & Minifier — Pretty-print or minify CSS. Handles comments, strings, and nested at-rules.JavaScript Beautifier & Minifier — Format, minify, or obfuscate JavaScript. String, template, regex and comment aware.SQL Formatter — Format SQL queries: clauses on new lines, keywords uppercased.SQL Converter — Convert SQL INSERT statements or SELECT results to CSV, JSON, XML, YAML, or HTML.Markdown Preview — Live GitHub-flavoured-ish Markdown rendering (safe, HTML-escaped).Diff Checker — Compare two texts line by line with additions and deletions highlighted.Base64 / Base32 / Base58 / Base85 Encoder — Encode and decode text using Base64, Base32, Base58, Base85, or ASCII85.URL Encode / Decode — Percent-encode or decode text and query components, in any character set.HTML Entity Encode / Decode — Escape/unescape HTML special characters and numeric entities.ROT13 / ROT-N Encoder — Apply the ROT13 letter cipher (or any ROT-N shift) to text. ROT13 is its own inverse.JWT Decoder — Decode a JWT's header and payload. Optionally verify an HMAC signature.JWT Generator — Create a signed JWT (HS256/384/512) from a JSON payload and secret.Hash Generator — Compute MD5, SHA-1, SHA-256, SHA-384, SHA-512, and CRC-16 digests of text.HMAC Generator — Compute a keyed HMAC signature of a message (SHA-1/256/384/512).CRC32 Generator — Compute the CRC-32 (IEEE 802.3) checksum of text, shown as hex and decimal.Hash Verification — Compute a hash of your text (MD5, SHA-1/256/384/512 or CRC-32) and compare it against an expected value to confirm a match.Checksum Calculator — Upload a file to compute its SHA-1, SHA-256, SHA-384, SHA-512 and CRC-32 checksums for integrity verification.Text Compression — Compress and decompress text using GZip, Deflate, or Deflate-Raw algorithms.BCrypt Generator — Hash a password with bcrypt (Blowfish-based, salted) at a configurable cost, or verify a password against an existing bcrypt hash.AES Encrypt / Decrypt — Encrypt or decrypt text with AES-256-GCM using a password (PBKDF2-SHA256 key derivation). Output is base64 packing salt + IV + ciphertext.RSA Encrypt / Decrypt — Generate an RSA keypair and encrypt/decrypt short messages with RSA-OAEP (SHA-256). Keys are PEM. Best for small payloads (≈190 bytes at 2048-bit).UUID Generator — Generate cryptographically-random version 4 UUIDs in bulk.Password Generator — Generate strong random passwords with configurable character sets.Regex Tester — Test JavaScript regular expressions with live match highlighting and groups.Unix Timestamp Converter — Convert between Unix timestamps and human-readable dates (local & UTC).Timezone Converter — Convert a date and time between any two IANA time zones (DST-aware).Date Difference Calculator — Calculate the elapsed time between two dates as a calendar breakdown and in total units.QR Code Generator — Turn text/URLs into a QR code, optionally with a centered logo. Download as PNG.Color Picker & Converter — Convert between HEX, RGB(A), HSL(A), HSV, and CMYK. Pick a color visually.cURL Converter — Convert a curl command to fetch, Axios, React, Python, Go, PHP, Java or Rust — and fetch back to curl.JSON ↔ YAML — Convert JSON to YAML and YAML back to JSON.TOML Converter — Convert TOML to JSON or YAML and JSON/YAML back to TOML, with validation.JSON ↔ CSV / SQL — Convert JSON array to CSV, TSV, or SQL INSERT statements. Parse CSV/TSV back to JSON.Lorem Ipsum Generator — Generate placeholder text by paragraphs, sentences or words.Case Converter — Convert text between camelCase, snake_case, kebab-case, Title Case and more.Number Base Converter — Convert integers between binary, octal, decimal, hexadecimal, and custom bases (radix 2-36).Text / Binary / Hex / Decimal / Octal Converter — Convert between text, binary, hexadecimal, decimal, and octal. Auto-detects the input format.Slug Generator — Convert titles into clean, URL-friendly slugs. Strips accents and punctuation.CSS Unit Converter — Convert between px, rem, em, %, pt, pc, in, cm, mm, vw and vh.Image Converter — Turn an image into a Base64 data URI, CSS background, <img> tag or an SVG wrapper.Unicode Encoder / Decoder — Convert text to and from \uXXXX escapes, or list its Unicode code points.UTF-8 Encoder / Decoder — Convert text to its UTF-8 bytes (hex, decimal or binary) and decode bytes back to text.ASCII Converter — Convert text to and from character codes in decimal, hexadecimal or binary.Escape / Unescape — Escape and unescape strings for JSON, XML, JavaScript, CSV, and SQL contexts.Word & Character Counter — Live count of words, characters, lines, sentences, paragraphs and reading time.Text Formatter & Cleaner — Clean up text: remove blank lines, trim spaces, strip line numbers, sort/shuffle/reverse lines or words, remove punctuation, flip upside down.Advanced String Tools — Advanced string manipulation: remove accents, extract delimited text, filter lines, calculate similarity, character diff.Emoji Picker — Browse and click an emoji to copy it to your clipboard.Nano ID Generator — Generate compact, URL-safe unique IDs with a configurable size and alphabet.ULID Generator — Generate ULIDs — 128-bit, lexicographically sortable IDs (48-bit time + 80-bit randomness) in Crockford Base32, with an optional monotonic mode.UUID Validator — Check whether a string is a valid UUID and detect its version and variant.Random Number Generator — Generate cryptographically-random integers, decimals, primes, or fractions within a range.Random String Generator — Generate random strings from selectable character sets, or special formats (hex, binary, MAC address).Random Regex Generator — Generate random strings that match a regular expression pattern. Perfect for test data generation.ASCII Art Generator — Turn text into a figlet-style banner or convert an image into ASCII art. Copy, download as text or image, and share.Snowflake ID Generator — Generate and decode Twitter/Discord-style Snowflake IDs with a configurable epoch and bit layout.CSS Gradient Generator — Design linear or radial gradients with live preview and copy the CSS.Box Shadow Generator — Visually build a CSS box-shadow and copy the rule.CSS Grid & Flexbox Generator — Generate CSS Grid templates or Flexbox layouts with a live preview, then copy or download the CSS.Query Parameter Parser — Break a URL or query string into its individual parameters.Query String Builder — Assemble a URL-encoded query string from key/value pairs.robots.txt Generator — Generate a robots.txt with allow/disallow rules, crawl-delay and sitemap.sitemap.xml Generator — Turn a list of URLs into a valid XML sitemap..gitignore Generator — Combine common .gitignore presets for languages, OSes and editors.Dockerfile Generator — Scaffold a Dockerfile for many stacks with multi-stage builds, env vars, ports, a non-root user and healthcheck..htaccess Generator — Generate common Apache .htaccess rules (HTTPS, www, caching, compression).Server Config Generator — Generate nginx, Apache or Tomcat configs for HTTPS, reverse proxy, load balancing, API gateway, caching and rate limiting.XML Beautifier / Minifier — Pretty-print, minify, validate XML. Convert to JSON or CSV.Cron Expression Parser — Translate a cron expression into a plain-English schedule.Cron Expression Generator — Build a cron expression from simple schedule fields with a live description.Regex Generator — Pick a common validation pattern and test it against sample text.CIDR Calculator — Expand an IPv4 CIDR block into network, broadcast, host range and mask.Subnet Calculator — Enter an IP and a subnet mask (dotted or prefix) to compute the subnet details.IP Address Converter — Convert IPv4 addresses to and from decimal, hexadecimal, octal, and binary formats.Punycode Converter — Convert internationalized domain names (IDN) to and from Punycode (xn--) ASCII form.CSP Generator & Evaluator — Build a Content-Security-Policy from directives and lint any pasted CSP for common weaknesses.Kubernetes Manifest Generator — Generate a Kubernetes Deployment + Service manifest (image, replicas, ports, env vars) as YAML.Docker Compose Generator — Build a docker-compose.yml with a primary service plus optional Postgres, MySQL, Redis or Mongo add-ons.Terraform (AWS) Generator — Generate Terraform HCL for common AWS resources: EC2 instance, S3 bucket or security group.GitHub Actions Generator — Generate a CI workflow (.github/workflows/ci.yml) for Node, Python, Go, Java or Rust with push/PR triggers.AWS IAM Policy Generator — Generate AWS IAM policy JSON documents with common actions for S3, EC2, Lambda, DynamoDB, and more.GitLab CI Generator — Generate .gitlab-ci.yml pipeline configurations for Node.js, Python, Docker, Terraform, and Go projects.Nginx Config Generator — Generate production-ready Nginx server blocks for reverse proxy, SPA, or static sites with SSL, gzip, and security headers.SSL/TLS Certificate Decoder — Decode PEM-encoded X.509 certificates — view subject, issuer, validity, SAN, and expiration status.Helm Chart Generator — Generate Kubernetes Helm chart scaffolding (Chart.yaml, values.yaml, deployment template) with configurable options.Dockerfile Linter — Lint Dockerfiles offline — checks for best practices like pinned tags, apt cleanup, COPY vs ADD, exec-form CMD, and more.Terraform Backend Config — Generate Terraform backend configuration for S3, GCS, Azure, Consul, or local state storage with provider setup.Kubernetes Policy Checker — Analyze Kubernetes YAML offline for risky security settings, mutable images, missing resources, and production-readiness gaps.Terraform Static Analyzer — Scan Terraform HCL offline for risky AWS patterns such as public admin ingress, unencrypted storage, missing provider pins, and static credentials.IAM Policy Risk Analyzer — Review AWS IAM policy JSON offline for wildcard permissions, broad resources, escalation-sensitive actions, and risky trust patterns.Architecture Diagram Generator — Create Mermaid architecture diagrams offline from service and dependency lists for system design, DevOps handoffs, and runbooks.Incident Runbook Builder — Generate practical incident response runbooks offline with triage, diagnosis, rollback, communication, validation, and follow-up sections.SLO Error Budget Calculator — Calculate availability, allowed downtime, error budget consumption, remaining budget, and burn rate for SRE and operations planning.Image Resizer & Compressor — Crop, resize an image to exact pixel dimensions and re-encode it at a chosen quality to shrink the file size.Image Cropper — Crop an image with a draggable, resizable selection box. Move it, drag any of the 8 handles, and lock to a fixed aspect ratio or crop freely.SVG Viewer — Paste SVG markup to preview it live and export it as a data URI or PNG.Barcode Generator — Generate a Code 128 barcode from text and export it as PNG.Favicon Generator — Create favicon PNGs from a letter or emoji with custom colors, in every common size.Fake Data Generator — Generate mock people or products (JSON/XML/CSV) or placeholder images (PNG/JPG/WEBP/GIF) for prototyping.SQLite Viewer — Open a .sqlite/.db file in the browser, browse tables and run SQL — fully client-side.Clipboard History — The last 10 things you copied from any tool. Click to copy again.HTTP Status Codes — Searchable reference of HTTP response status codes with their names and meanings.Keyboard Event Tester — Inspect key events (key, code, keyCode, modifiers) and browse the ASCII chart with code↔character conversion.Developer Calculator — Evaluate math expressions with functions (sqrt, sin, cos, log), constants (pi, e), operators (^, %, /), and bitwise operations (and, or, xor, not, shl, shr).OpenAPI / Swagger Viewer — Browse an OpenAPI/Swagger document's endpoints and schemas in a readable list — paste JSON or YAML, entirely offline.OpenAPI to cURL Inspector — Convert OpenAPI/Swagger JSON operations into ready-to-run cURL request starters — a lightweight inspector, not a full spec browser.JSON & HAR Secret Redactor — Redact likely secrets, authorization headers, and email addresses locally before sharing data.SVG Optimizer & Inspector — Minify SVG markup locally and flag common preview and accessibility gaps.Web Manifest Validator — Validate a PWA web manifest locally and inspect essential install metadata.CSS Specificity Calculator — Compare CSS selectors locally and see the cascade specificity tuple.Cookie Parser & Set-Cookie Builder — Parse Cookie and Set-Cookie values, then build a standards-friendly response header locally.Unicode Security Inspector — Find invisible Unicode, bidi controls, mixed scripts, and common confusable characters locally.Regex Extractor — Extract every regex match and capture group with locations, then export JSON or CSV locally.Cron Expression Explainer — Explain five-field cron schedules and preview the next 10 runs in a selected timezone.CSS clamp() Fluid Scale Generator — Generate a responsive CSS clamp() value from minimum and maximum viewport and size targets.Unit Converter — Convert between units of length, weight, temperature, area, volume, speed, time, data size, and pressure.JSONPath Query — Query JSON data using JSONPath expressions ($, dot notation, arrays, wildcards, recursive descent).HTML ↔ Markdown Converter — Convert HTML to Markdown and Markdown to HTML. Handles headings, lists, tables, links, images, and code blocks.HAR File Analyzer — Inspect a browser HAR capture locally: slow requests, failures, domains, and transfer size..env Parser & Converter — Validate environment variables locally and convert .env entries to JSON or Docker Compose YAML.JSON Schema Validator — Validate JSON locally against a practical JSON Schema subset and see precise field-level errors.HTTP Header Analyzer — Parse HTTP headers locally and identify caching, CORS, cookie, and security-header concerns.Cheat Sheets — Instant-search reference cards for git, docker, kubectl, terraform, vim, bash, and regex. Click any command to copy.Kubernetes YAML Generator — GUI wizard to generate production-ready Kubernetes manifests: Deployment, Service, Ingress, ConfigMap, Secret, PVC, HPA.Markdown Writer — Write markdown with a quick-action toolbar. Preview as rendered HTML, copy or download in multiple formats.API Tester — Lightweight REST, GraphQL & WebSocket client with auth, body types, query params, and request history.JSON to TypeScript — Convert JSON objects to TypeScript interfaces. Handles nested objects, arrays, and optional/null fields.CSS Animation Generator — Create CSS animations with live preview. Adjust timing, pick presets, upload an image to test. Copy the generated CSS.Image ↔ Base64 — Convert images to Base64 data URIs, or paste a data URI to preview and download the image. Max 2MB.HTML Table Generator — Visual table builder — set rows and columns, fill in data, generate clean HTML table code.Credit Card Validator — Validate card numbers using the Luhn algorithm. Identifies card type (Visa, Mastercard, Amex, Discover, etc.).