Skip to content

CSS Specificity Calculator — Selector Weight

Calculate and visualize CSS selector specificity. Paste selectors to see specificity scores, compare multiple selectors, and understand which styles win.

CSS Specificity Calculator — Selector Weight

Winner: #header .logo

4 selectors, highest specificity: #header .logo

.nav > ul li.active a:hover
(0, 0, 3, 3)
:hover.nav.activeullia
IDs: 0Classes/Attrs/Pseudos: 3Elements: 3Score: 303
#header .logowins
(0, 1, 1, 0)
#header.logo
IDs: 1Classes/Attrs/Pseudos: 1Elements: 0Score: 10100
div.container p
(0, 0, 1, 2)
.containerdivp
IDs: 0Classes/Attrs/Pseudos: 1Elements: 2Score: 102
h1
(0, 0, 0, 1)
h1
IDs: 0Classes/Attrs/Pseudos: 0Elements: 1Score: 1

How specificity works

IDs — weight 0,1,0,0
Classes / Attributes / Pseudo-classes — weight 0,0,1,0
Elements / Pseudo-elements — weight 0,0,0,1

Specificity is expressed as (inline, id, class, element). Higher tuples win. Universal selector (*) and combinators (+, >, ~) add no specificity.

Updated . Provided as is. Check the output before you rely on it in production.

How to use CSS Specificity Calculator — Selector Weight

  1. 1

    Paste your CSS selectors

    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.

  2. 2

    Read the specificity tuple

    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).

  3. 3

    Read the color-coded token breakdown

    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.

  4. 4

    Sort by specificity to find the winner

    Click 'Sort by specificity' to rank all selectors from highest to lowest. The winning selector is highlighted with a 'wins' badge.

  5. 5

    Fix cascade conflicts

    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.

Questions and answers

What is CSS Specificity Calculator?
Specificity is the weight a browser gives a selector to pick which conflicting rule wins: IDs outrank classes, attributes and pseudo-classes, which outrank elements. This calculator scores each selector you paste as an (inline, id, class, element) tuple, handles :is(), :not(), :has() and :where(), and charts them.
Does CSS Specificity Calculator store or send my data?
No. All processing happens entirely in your browser. Your selectors never leave your device — nothing is sent to any server.
Why does my selector lose even though it looks more specific?
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.

Use it as an API

CSS Specificity Calculator — Selector Weight is also callable as a free HTTP JSON API at https://aidevhub.io/api/css-specificity-calculator/ — GET with query parameters or POST with a JSON body, no authentication, CORS enabled, fair use (abusive traffic is throttled at the edge; there is no per-request quota header). Responses return { ok, tool, result, meta }. 

curl -s "https://aidevhub.io/api/css-specificity-calculator/?selector=nav%20.item%20a%3Ahover"

Machine-readable contract: /api/tool/css-specificity-calculator.json All API endpoints: /agents/ LLM site index: /llms.txt

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Dedicated API endpoint

Deterministic outputs, machine-safe contracts, and production-ready examples.

Dedicated API

https://aidevhub.io/api/css-specificity-calculator/

OpenAPI: https://aidevhub.io/api/openapi.yaml

GET /api/css-specificity-calculator/ GET css-specificity-calculator
POST /api/css-specificity-calculator/ POST css-specificity-calculator