Specificity Calculator (Dark Mode by pixelOne)

A visual way to understand CSS specificity. Change the selectors or paste in your own.

Why isn't this great tool able to recognize HTML tags or attributes like style="..."?

As Keegan wrote on GitHub "I don't see much value in making the input fields accept HTML tags as the "inline style" box would always be equal 1". I totally agree, so inline styles have to be considered manually.

About Specificity Calculator

Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity. Specificity Calculator is built for CSS Selectors Level 3. Specificity Calculator isn’t a CSS validator. If you enter invalid selectors it will return incorrect results. For example, the negation pseudo-class may only take a simple selector as an argument. Using a pseudo-element or combinator as an argument for :not() is invalid CSS3 so Specificity Calculator will return incorrect results. Specificity Calculator doesn’t support CSS character escape sequences. Care has been taken to ensure results are accurate. If you find a defect, please report it.