Format shown is (IDs, classes/attributes/pseudo-classes, types/pseudo-elements). The browser compares these three columns left to right, it never adds them into a single number.
Built by Rankite, the SEO team behind Swordfish AI's +400% revenue and Zluri's +45% organic growth. See the case studies
CSS specificity decides which rule wins when two or more selectors in your stylesheet target the same element with conflicting styles. Paste a few selectors into the calculator above, one per line, and it breaks each one down by ID count, class count and type count, then ranks them by which one the browser would apply.
Specificity is not one number, it is three separate counts compared in order. The first column counts ID selectors like #header. The second column counts class selectors like .nav, attribute selectors like [type="text"], and pseudo-classes like :hover or :first-child. The third column counts type selectors like div or a, along with pseudo-elements like ::before. A browser compares two selectors by looking at the ID column first: whichever has more IDs wins outright, regardless of how many classes or types the other selector has. Only when the ID counts tie does the browser move on to compare the class column, and only when that ties too does it compare the type column.
The universal selector * and combinators such as the child combinator >, the sibling combinators + and ~, and plain whitespace between selectors all add zero specificity. They change which elements a selector matches, not how strongly it wins against a competing rule. Two selectors can match the exact same element while having very different specificity, which is usually the actual cause of a style not applying the way you expected.
These functional pseudo-classes do not add a flat point the way :hover or :focus do. Instead, per the CSS Selectors specification, each one takes on the specificity of the single most specific selector inside its parentheses, not the sum of everything inside. The one deliberate exception is :where(), which the spec defines to always contribute zero specificity no matter what you put inside it, making it useful for writing default styles that are easy for anyone downstream to override. The calculator above applies this same logic rather than treating every pseudo-class as an equal flat 10 points. If your team is untangling a CSS codebase where specificity fights are slowing down every design change, that is exactly the kind of technical debt worth fixing before it compounds further, a free SEO audit often surfaces related front-end issues that are quietly costing you rankings too.
Want this done for you? Rankite offers monthly SEO management and SEO strategy session.
Check any two colors against WCAG contrast requirements for accessible text.
Work out matching width and height for any target aspect ratio.
Convert any color between HEX, RGB, HSL and other common formats.
Get a free, no-obligation SEO audit and a 30-minute strategy session. We'll show you exactly where the growth is hiding.
Fill out the form and we'll get back to you within one business day. Prefer email? Write to us directly at contact@rankite.com.