CSS Specificity Calculator

CSS selectors

Summary

Selectors

0

Strongest

0-0-0

Status

Idle

Specificity is shown as A-B-C: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

Specificity results

Analyze selectors to see specificity scores.

About CSS Specificity Calculator

CSS specificity decides which selector wins when multiple rules target the same element. This calculator shows the A-B-C score for each selector.

It counts IDs, classes, attributes, pseudo-classes, elements, and pseudo-elements, including common selector functions such as :is(), :not(), :has(), and :where().

How to use this tool

Paste one selector per line, a comma-separated selector list, or full CSS rules.
Click Analyze to calculate specificity for each selector.
Compare the A-B-C scores and review which selector is strongest.

Tips

Avoid unnecessary IDs when you want CSS that is easy to override.
:where() always has zero specificity, which is useful for low-priority defaults.
When selectors have equal specificity, the later matching CSS rule usually wins.

Related tools

You may also find these tools useful.

CSS Selector Tester

Test CSS selectors against HTML and inspect matched elements.

CSS Minifier / Beautifier

Minify CSS to reduce file size or beautify compressed CSS for easier reading.

CSS Clamp Generator

Generate responsive CSS clamp() values for fluid typography, spacing, gaps, and layout sizing.

CSS Grid Generator

Build CSS Grid layouts with columns, rows, gaps, alignment, live preview, and copy-ready CSS.

CSS Flexbox Generator

Create CSS flexbox layouts with live preview, alignment controls, wrapping, direction, gap, and ready-to-copy CSS.

CSS Unit Converter

Convert CSS units such as px, rem, em, %, vw, and vh with base font size, parent size, and viewport settings.

CSS specificity FAQ

What does A-B-C mean?

A is ID selectors, B is classes, attributes, and pseudo-classes, and C is element and pseudo-element selectors.

Does inline style count here?

This tool calculates selector specificity. Inline styles are outside selector specificity and are normally stronger than stylesheet selectors.

How does :where() affect specificity?

:where() contributes zero specificity, even when its arguments contain IDs or classes.

Can I paste full CSS rules?

Yes. The tool extracts selectors before opening braces and analyzes them.