CSS Specificity Calculator: Compare Selector Scores
Paste one CSS selector per line to calculate its specificity as an (a, b, c) score. IDs count in a, classes, attributes, and pseudo-classes in b, and elements and pseudo-elements in c. :where() adds no specificity, while :is(), :not(), and :has() use the highest specificity of their arguments. Sort scores to compare selectors.
CSS Specificity Calculator is a browser-based tool for calculating and comparing the specificity of CSS selectors. Enter one selector per line to see its score as (a, b, c), then sort the results to compare selector weight. It is useful when you want a clearer view of why one selector may take precedence over another.
The calculator follows the specificity groups: IDs contribute to a, classes, attributes, and pseudo-classes contribute to b, and elements and pseudo-elements contribute to c. The special pseudo-class rules are important: :where() contributes nothing, while :is(), :not(), and :has() take the maximum specificity of their arguments. The tool also provides options you can adjust, though the available description does not identify their individual settings.
CSS selectors describe which elements rules apply to, while specificity provides a way to compare selector weight. Calculating that weight is helpful when reviewing styles or investigating competing rules. Sorting scores makes it easier to compare multiple selectors at a glance, including selectors that use different kinds of components.
CSS Specificity Calculator runs entirely in your browser. Your input is processed on your device and is not uploaded, stored, or sent to a server. Once the page has loaded, the tool works offline, so you can use it without a network connection.
The calculator can help developers and DevOps engineers who work with CSS, from people learning how specificity is counted to experienced users reviewing a stylesheet. It works in the browser without requiring a local installation.
Step 1: Paste or enter your CSS selectors, with one selector on each line. The calculator returns a separate specificity score for each one.
Step 2: Review the available options and adjust them if needed. The tool's description does not specify individual option settings.
Step 3: Check each result as an (a, b, c) score: IDs contribute to a, classes, attributes, and pseudo-classes to b, and elements and pseudo-elements to c.
Step 4: Sort the results by score to compare selector specificity and help investigate which rule may take precedence.
Step 5: Copy the result for use in your notes or CSS review.
Use case: Check selector specificity while debugging CSS rules that appear to override one another. Comparing scores can help you spot when one selector has greater specificity.
Use case: Review a stylesheet during a refactor and compare selectors before changing their structure. The calculator makes each selector's (a, b, c) score easy to inspect.
Use case: Understand how IDs, classes, attributes, pseudo-classes, elements, and pseudo-elements contribute to specificity without calculating each score by hand.
Use case: Compare selectors that use :is(), :not(), or :has(). The calculator applies the maximum specificity of each pseudo-class's arguments.
Use case: Check the effect of :where() in a selector. It contributes no specificity, which can be useful to verify when reviewing CSS.
Use case: Handle a CSS specificity check without installing a local tool. Open the calculator in a browser on the machine you are using.
Use case: Review selectors containing internal project details without uploading them to a third-party service. The input is processed in your browser.