Calculate and compare CSS selector specificity scores with visual breakdown of ID, class, and element weights.
A selector can look long and still lose to a shorter one. This calculator turns each CSS selector into the three-part specificity tuple used for selector comparison: ID components, class-like components, and type-like components. Its visual breakdown makes competing selectors easier to compare column by column. The common surprise is that these values are not added as a decimal score; the first unequal column decides. Spaces and combinators affect matching structure but add no specificity.
A concrete input and expected output from the current implementation.
Input
#menu .item a
Expected output
Specificity: (1, 1, 1). IDs: 1; classes, attributes, and pseudo-classes: 1; elements and pseudo-elements: 1.
#menu contributes one ID, .item contributes one class, and a contributes one type selector. The two descendant combinators contribute nothing.
The ID column counts ID selectors. The middle column counts class selectors, attribute selectors, and pseudo-classes. The final column counts type selectors and pseudo-elements. Comparison proceeds from IDs to the middle column to the type column, stopping at the first difference. Universal selectors and combinators contribute zero, and counts never carry between columns.
Functional pseudo-classes have selector-specific rules. :where() contributes zero specificity, including its arguments. For :is(), :not(), and :has(), the pseudo-class itself adds no weight; the most specific selector in its argument list supplies the argument specificity. Ordinary pseudo-classes such as :hover count in the middle column. Selector components outside these functions are counted normally.
No. The tuple is compared left to right, not summed, so (1, 0, 0) outranks (0, 20, 0). Specificity is also only one cascade step. A declaration with lower selector specificity can win because of origin, importance, layer order, or other cascade rules. If all preceding cascade criteria and specificity tie, order of appearance can decide.
No. Each branch participates independently, so .a, #b contains specificities (0, 1, 0) and (1, 0, 0). The list does not become (1, 1, 0). Calculate each branch separately. Selector lists inside :is(), :not(), and :has() are different because those functional pseudo-classes use the most specific argument.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.