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 Gratis Sin registro

CSS Specificity Calculator

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

Cargando la herramienta…

Acerca de esta herramienta

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.

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Probador y depurador de expresiones regulares

Pruebe expresiones regulares con resaltado de coincidencias en tiempo real, grupos de captura y modo de reemplazo.

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.

Embellecedor / Formateador de código

Formatee y embellezca código en múltiples lenguajes con sangría configurable.