CSS Specificity Calculator

Paste a selector like `.nav > ul li.active a` and get back the standard four-part specificity tuple (inline styles, IDs, classes/attributes/pseudo-classes, elements), or paste two competing selectors to see which one actually wins, which is often the real answer when a style mysteriously isn't applying and the cause turns out to be specificity rather than a missing `!important`. Modern selectors like `:where()` (zero specificity by design), `:is()`, `:not()`, and `:has()` are handled correctly, including the rule that `:is()`/`:not()`/`:has()` take on the specificity of their most specific argument rather than counting as one flat unit. The tool flags `!important` separately since it overrides specificity entirely regardless of score, and it expects fully-resolved CSS selectors, so Sass nesting or the `&` parent selector needs to be compiled to plain CSS first.