What is CSS specificity?

Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated as (A, B, C): A=IDs, B=classes/attributes/pseudo-classes, C=type selectors.

How is specificity compared?

Compare A first, then B, then C. A selector with specificity (1,0,0) always beats (0,9,9). Equal specificity means the later rule in the stylesheet wins.

Does !important affect specificity?

!important overrides normal specificity entirely. The tool focuses on selector specificity; use !important sparingly as it breaks the natural cascade.

What about the universal selector and combinators?

The universal selector (*) and combinators (+, >, ~, ' ') have zero specificity and do not contribute to the (A, B, C) score.

Developer 無料サインアップ不要

CSS Specificity Calculator

Calculate and compare CSS selector specificity (A, B, C).

ツールを読み込み中…

このツールについて

Paste any CSS selector and instantly see its specificity score broken down into (A, B, C): A for ID selectors, B for classes/attributes/pseudo-classes, and C for type selectors/pseudo-elements. Compare two selectors to determine which one wins. Each part of the selector is highlighted and labeled so you understand exactly why a rule takes precedence. Includes common selector examples for quick reference.

使い方

1 Type or paste a CSS selector into the input field.
2 See the (A, B, C) specificity score and a color-coded breakdown instantly.
3 Use the Compare mode to enter two selectors and find which one wins.
4 Review the selector breakdown to understand each contributing part.
5 Browse the examples section for common selectors and their specificity values.

このツールについて

使い方

よくある質問