ToolHub
Open Tool

CSS Specificity Calculator

Calculate and compare CSS selector specificity scores with visual breakdown to understand style precedence and debug conflicts.

Developer Tools
Launch Tool All Tools

About This Tool

CSS Specificity Calculator lets you enter any CSS selector and instantly see its specificity score broken down into IDs, classes, and elements. It supports side-by-side comparison of two selectors with automatic winner detection, along with common selector examples and specificity rules reference.

Key Features

Quick Preview

Use Cases

css specificity selector

Frequently Asked Questions

What is CSS specificity?

CSS specificity is a scoring system that determines which CSS rules are applied when multiple selectors target the same element. It is calculated based on the types of selectors used: ID selectors have the highest weight, followed by class and attribute selectors, then element selectors.

How is specificity calculated?

Specificity is calculated as a three-part score (IDs, Classes, Elements). Each ID selector adds 1 to the ID column, each class, attribute, or pseudo-class selector adds 1 to the class column, and each element or pseudo-element selector adds 1 to the element column.

Does !important override specificity?

Yes, the !important declaration overrides all normal specificity calculations. When multiple !important rules conflict, the one with higher specificity wins. Inline styles also override all selector-based specificity.

Can I compare two selectors side by side?

Yes, the tool provides a side-by-side comparison panel where you can enter two selectors and instantly see which one has higher specificity. A winner badge is displayed automatically next to the selector with the higher score.

What selector types does the calculator support?

The calculator supports ID selectors, class selectors, attribute selectors, pseudo-class selectors like :hover and :nth-child, element selectors, and pseudo-element selectors like ::before and ::after. It also provides common examples you can click to fill in.