# Css Specificity Calculator

- Human page: https://happytails.ai/en/developer-tools/css-specificity-calculator/
- Markdown: https://happytails.ai/en/developer-tools/css-specificity-calculator.md
- Structured JSON: https://happytails.ai/agents/en/developer-tools/css-specificity-calculator/index.json
- Visibility: public

## Tool capabilities

| Property | Value |
| --- | --- |
| Tool ID | `css-specificity-calculator` |
| Category | developer-tools |
| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |
| Browser execution | Use the visible action or interactive controls. |
| Browser processing | Browser; see tool notes for network behavior. |
| HTTP API | Not callable through HTTP. |
| Browser-agent interface | run_current_tool |

### Implementation notes

Compare selector specificity. Processing stays on your device. Reports are bounded and complete within the stated limits.

### Inputs and settings

Text input: CSS.

Example or placeholder shown in the interface (not a validated fixture):

```text
a { color: #3366cc; }
```

Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.

No additional settings are declared for this tool.

### Browser-agent workflow

1. Open the human page in a browser that supports WebMCP.
2. Discover the interface exposed by that page; use its actual schema.
3. Select files on the page first when the tool requires files.
4. Call `run_current_tool` with valid input and settings.
5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.

Calls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.

### Planning specification

Process bounded CSS locally. Reports preserve complete input and assumptions.

This describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.

### Complete machine-readable capability record

```json
{
  "id": "css-specificity-calculator",
  "category": "developer-tools",
  "built": true,
  "requirements": "Process bounded CSS locally. Reports preserve complete input and assumptions.",
  "implementation": {
    "fields": [],
    "presentation": "metrics",
    "inputMaxLength": 200000,
    "inputErrorCode": "CSS_TOOL_INPUT",
    "note": "Compare selector specificity. Processing stays on your device. Reports are bounded and complete within the stated limits.",
    "example": {
      "input": "{\"selector\":\"#app .card, main .card\"}",
      "options": {}
    },
    "experience": {
      "automatic": false,
      "single": false,
      "inputMaxLength": 200000,
      "inputMode": "text",
      "label": "CSS",
      "placeholder": "a { color: #3366cc; }",
      "help": "Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.",
      "action": null
    },
    "mode": "explicit",
    "interactive": false
  },
  "execution": "Browser interface",
  "api": null,
  "browser_agent": {
    "supported": true,
    "name": "run_current_tool",
    "discovery": "WebMCP on the human page in a supporting browser",
    "verification": "See audit/API-AUDIT.md; availability is not verification"
  }
}
```

## Page guide

Analyze CSS locally with explicit inputs, bounded results and a complete downloadable report.

How can we improve this tool?

Report a problem or share an idea.

Please leave out private information. Your message and the tool name go to our team via PostHog.

### How to use Css Specificity Calculator

1. Paste CSS or JSON using the example.
2. Review the bounded report and assumptions.
3. Download complete JSON or CSV.

## Useful next steps

- [Css Cascade Debugger](https://happytails.ai/en/developer-tools/css-cascade-debugger/) ([Markdown](https://happytails.ai/en/developer-tools/css-cascade-debugger.md))

- [Css Custom Property Resolver](https://happytails.ai/en/developer-tools/css-custom-property-resolver/) ([Markdown](https://happytails.ai/en/developer-tools/css-custom-property-resolver.md))

- [Css Media Query Simulator](https://happytails.ai/en/developer-tools/css-media-query-simulator/) ([Markdown](https://happytails.ai/en/developer-tools/css-media-query-simulator.md))

## Use the documented input

Explain which supplied selector wins and why