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.

이 도구에 대해

사용 방법

자주 묻는 질문