CSS Specificity Calculator

Rank selectors by ID, class/attribute/pseudo-class, and type/pseudo-element specificity with modern functional pseudo-classes.

Selectors — one per line

Selector specificity only. This does not model cascade origin, layers, !important, scoping proximity, inline declarations, or source order. Common Selectors Level 4 patterns are handled; unusual shadow-DOM and escaped-selector edge cases should be verified in DevTools.

Runs locally in your browser. Generated CSS is not deployed or tested against your site automatically.

How to use this CSS Specificity Calculator

Calculate and compare CSS selector specificity for common Selectors Level 4 patterns. Enter your values above and the result is calculated directly in your browser. No account is required.

Fast answer, clear inputs

This tool is built around one job: give the answer quickly without forcing a signup or hiding the result. Related tools are linked nearby when the next calculation or conversion is useful.