CSS Specificity Calculator — Calculate CSS Selector Weight Online | DevKits
Calculate CSS selector specificity. See exactly how each part of a selector contributes to the (a,b,c,d) weight. Includes IDs, classes, attributes, pseudo-classes, type selectors, and pseudo-elements. 100% local.
Last updated:
CommentsType a CSS selector to see its (a,b,c,d) specificity and a per-part explanation.
What is CSS Specificity?
CSS specificity determines which rule wins when multiple selectors target the same element. The spec defines a four-component formula — (a,b,c,d) — where a counts inline styles, b counts IDs, c counts classes/attributes/pseudo-classes, and d counts type/pseudo-element selectors. The values are compared left-to-right: (0,1,0,0) beats (0,0,99,0). The !important flag and universal selector (*) are special cases: !important is a separate overriding bit, and * contributes 0 to all components.
How to calculate specificity
- 1Type or paste a CSS selector.
- 2The specificity (a,b,c,d) appears instantly.
- 3Review the per-part breakdown to understand which component of the selector contributes what.
Frequently Asked Questions
What do the 4 numbers (a,b,c,d) mean?
a = inline styles (1 or 0), b = ID selectors, c = classes / attributes / pseudo-classes, d = type selectors / pseudo-elements. The higher the number read left to right, the higher the specificity. Example: 0,1,2,1 beats 0,0,3,0 because 1 > 0 in the b column.
The !important rule — how does that work?
!important breaks specificity entirely. A rule with !important overrides any non-!important rule, regardless of specificity. The !important flag acts as a one-bit column to the left of a — a single !important declaration beats a thousand ID selectors.
Try Next
Meta Tag Preview
Preview how your page will appear in Google search results and social share cards on Facebook, Twitter/X, and LinkedIn. Parses <title>, meta description, canonical, and full Open Graph / Twitter Card tags with diagnostics. 100% local.
Related Tools
HTTP Status Codes
Complete reference of HTTP status codes with meanings, use cases, and RFC citations. Search 60+ codes from 100 Continue to 511 Network Authentication Required.
cURL Converter
Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.
URL Parser
Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.
CIDR Calculator
Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV instantly with a live color preview and copy-ready CSS strings. Free, no signup, runs entirely in your browser.
User Agent Parser
Parse User-Agent strings to identify browser, engine, operating system, and device. Instantly see what your own browser sends.