SpeciLab: CSS Specificity Calculator

How it helps

Use it for a focused task

SpeciLab lets you paste up to three CSS selectors and instantly see how their specificity scores break down. Each selector is parsed into ID, class/pseudo-class/attribute, and element/pseudo-element components.

A side-by-side bar chart shows which selector wins the cascade, and a live DOM preview demonstrates the override in context. Paste or type a CSS selector into any of the three input fields.

The specificity score updates live as you type. Add a second or third selector to compare them head-to-head.

Good next steps

Make the result easier to act on

• Start with the examples or presets if you are unsure what to enter for SpeciLab: CSS Specificity Calculator.
• Try one realistic scenario first, then adjust the numbers or notes to compare another path.
• Use save or share from the project footer when you want to return to the same helper later.
• Open a related project below when the result points to a timing, budget, writing, planning, or comparison task.