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 Gratuito Sem cadastro

CSS Specificity Calculator

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

Carregando ferramenta…

Sobre esta ferramenta

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.

Como usar

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.

Perguntas frequentes

Ferramentas relacionadas

Testador e Depurador de Regex

Teste expressões regulares com destaque de correspondências em tempo real, grupos de captura e modo de substituição.

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.

Embelezador / Formatador de Código

Formate e embeleze código em múltiplas linguagens com indentação configurável.