CSS Specificity Calculator

Analyze CSS selector weights instantly and break down specificity values into the standard (A, B, C) format.

CSS Selector:

Calculated Specificity Weight

IDs (A)

Classes/Attrs/Pseudo (B)

Elements/Pseudo-elems (C)

Specificity: 0, 1, 3

Breakdown Analysis:

Specificity Hierarchy Reference

1. IDs (A)

Count of ID selectors (e.g., #nav). They carry the highest weight short of inline styles.

2. Classes, Attributes & Pseudo-classes (B)

Count of class selectors (.class), attribute selectors ([type="text"]), and pseudo-classes (:hover).

3. Elements & Pseudo-elements (C)

Count of type/element selectors (div, p) and pseudo-elements (::before).

What is CSS Specificity Calculator?

CSS Specificity Calculator is a browser-based developer utility that helps you work with its relevant input and output without installing a separate desktop application.

How to use this tool

Enter or paste the required input, select the available options, then review the result before copying or applying it in your project. Test the result in its target environment when accuracy matters.

Frequently Asked Questions (FAQ)

Yes. This tool is designed to process the values you enter in your browser.