CSS Specificity Calculator & Comparator
Instantly calculate the specificity (A,B,C) of any CSS selector, compare rules side-by-side, and explore visual weight breakdowns
CSS Selector Input
(0, 0, 0)CSS Specificity Reference Table
Quick guide detailing how different CSS selector components contribute to the A, B, C vector score.
| Selector Type | Vector Score (A, B, C) | Examples |
|---|---|---|
| Inline Styles | Overrides all standard rules | style="color: red;" |
| ID Selectors | (1, 0, 0) | #header, #submit-btn |
| Classes, Attributes & Pseudo-classes | (0, 1, 0) | .card, [type="text"], :hover, :nth-child(2) |
| Elements & Pseudo-elements | (0, 0, 1) | div, p, a, ::before, ::after |
| Universal Selector & Combinators | (0, 0, 0) | *, >, +, ~, ' ' (space) |
Why Use Our CSS Specificity Calculator?
Explore features built for web developers, designers, and front-end engineers.
CSS specificity is a weight given to CSS selector declarations, determining which style rule is applied by the browser when element conflicts occur. Specificity is represented as a three-value vector (A, B, C), where each component represents a category of selector components.
Our calculator breaks down your selectors instantly into IDs, classes/attributes/pseudo-classes, and element tags so you can easily debug override issues in your stylesheets.
ID Selectors (#id)
IDs carry the highest weight in standard selectors. Each ID adds 1 to the 'A' column value.
Classes & Attributes
Classes (.class), attributes ([attr]), and pseudo-classes (:hover, :focus) each add 1 to 'B'.
Elements & Pseudo-Elements
HTML type selectors (div, p, span) and pseudo-elements (::before, ::after) add 1 to 'C'.
Side-by-Side Comparison
Directly compare two competing rules to immediately identify which style wins precedence.
Visual Weight Graphs
Inspect proportional visual weight bars representing each selector component category.
100% Client-Side
Runs entirely in your web browser with complete privacy and zero data transfer.