How to use the CSS Specificity Calculator

1. Paste a selector such as #header .nav a:hover.
2. The calculator counts ID, class-like and type selectors.
3. Compare the score with a competing selector to understand which declaration has greater specificity.

What is CSS specificity?

Specificity is part of the CSS cascade. When multiple declarations target the same element and competing rules have the same origin and importance, the browser compares selector specificity. A selector with more ID selectors outranks one with fewer IDs; when the ID count ties, class-like selectors are compared, then type selectors.

How the score works

This tool displays specificity as three values: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. For example, #site .menu a:hover scores 1-2-1: one ID, two class-like selectors, and one element selector.

What does not increase specificity?

The universal selector * does not add specificity. Combinators such as >, +, ~ and descendant spaces do not add specificity either. The :where() pseudo-class deliberately has zero specificity. Functional pseudo-classes such as :is(), :not() and :has() require special handling because their arguments influence specificity.

Why specificity causes WordPress and Elementor CSS problems

Page builders, themes and plugins often generate selectors that are more specific than a short custom rule. If your custom CSS appears in DevTools but is crossed out, compare the selectors before adding !important. A slightly more targeted selector is usually easier to maintain than escalating specificity everywhere.

How to avoid specificity wars

Keep selectors shallow, prefer reusable classes, avoid IDs for styling, and place component rules in a predictable order. Use !important sparingly. If a third-party stylesheet is winning, first inspect the cascade and identify whether the real problem is specificity, source order, inline styles, or an existing important declaration.

Examples

.button scores 0-1-0. .header .button scores 0-2-0. #checkout .button scores 1-1-0 and therefore outranks both in a normal same-origin comparison.

Frequently asked questions

Is a higher specificity always better?

No. High specificity makes CSS harder to override and maintain. The goal is predictable, appropriately scoped selectors.

Does !important change the specificity number?

No. Important declarations participate in a separate cascade step. Specificity is compared among declarations that are otherwise competing at the same cascade level.

Do inline styles have specificity?

Inline style declarations are handled specially by the cascade and generally outrank normal author stylesheet rules. An important author rule can change that outcome.

Why is my Elementor custom CSS still not working?

Specificity is only one possibility. Check invalid CSS, cache, generated CSS files, responsive conditions, source order and whether another rule uses !important.

Related WPToolix tools

Use the CSS Clamp Generator for fluid values or the Elementor JSON Validator when troubleshooting imported templates.