<!-- Markdown version of https://ocxly.com/css-specificity-calculator.html · auto-generated, may lag the live page -->

# CSS Specificity Calculator

Type a CSS selector and see its specificity as an **(A, B, C)** tuple — broken down into the IDs, classes/attributes/pseudo-classes and elements that make it up. Computed live in your browser.

### How it works

Specificity is scored as three numbers **(A, B, C)**: **A** counts `#id` selectors, **B** counts classes, attribute selectors and pseudo-classes (`.class`, `[type]`, `:hover`), and **C** counts element types and pseudo-elements (`div`, `::before`). The universal selector `*` and combinators add nothing, and `:where()` contributes zero. A higher tuple wins, compared left to right. The result and a per-category breakdown update as you type — nothing is uploaded.

---
*Source: [ocxly.com/css-specificity-calculator.html](https://ocxly.com/css-specificity-calculator.html) — OCXLY, free 100% client-side privacy-first tools. Free CSS specificity calculator scoring any selector as (A, B, C) with a breakdown, entirely in your browser.*
